ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加する方法を紹介し、その方法を共有します。詳細は次のとおりです。

ここに画像の説明を挿入

<el-テーブル列
    ラベル="操作"
    固定="右"
    :render-header="テーブルアクション"
    幅="120">
    <!--scope は userList、scope.row は現在の行データです -->
    <テンプレート スロット スコープ="スコープ">
        <el-button @click="editCar(scope.row)" type="primary" icon="el-icon-edit" size="small" 円></el-button>
        <el-button @click="delCar(scope.row.carId)" type="危険"
                   icon="el-icon-delete" 円 size="small"></el-button>
    </テンプレート>
</el-table-column>
 //テーブル操作プロンプトtableAction() {
     これを返します。$createElement('HelpHint', {
         小道具: {
             内容: 「車両を編集/車両を削除」
         }
     }, '操作');
 },

インポートを忘れないでください

'~/components/HelpHint/HelpHint.vue' から HelpHint をインポートします。

そしてそれをコンポーネントに導入する

HelpHint.vue コンポーネントのコンテンツ

<テンプレート>
  <span>
    <span style="margin-right: 8px"><スロット></スロット></span>
    <el-tooltip :content="コンテンツ" :placement="配置">
      <i class="el-icon-question" style="cursor: ポインター;"></i>
    </el-tooltip>
  </span>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'ヘルプヒント',
    小道具: {
      配置:
        デフォルト: 'top'
      },
      内容: 文字列、
    },
    データ() {
      戻る {}
    },
  }
</スクリプト>

ElementUI テーブルにヘッダー アイコン フローティング プロンプトを追加する方法については、これで終わりです。より関連性の高い Element アイコン フローティング プロンプトについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ホバープロンプトにはvue2+elementuiを使用する
  • vue 要素 ui 検証はエラー プロンプト操作をアクティブにトリガーします
  • 要素ツールチップテキストプロンプトの使用例
  • Vueは要素テーブルにヘッダー情報プロンプト機能を実装します(推奨)
  • フォーム検証に値がある場合にエラープロンプトが表示される問題を解決するために Vue と組み合わせた要素

<<:  時系列転位修復ケースを実装するSQL

>>:  CSS3で跳ねるボールのアニメーションを実現

推薦する

Ubuntu 20.04にROS Noeticをインストールする方法

免責事項:プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...

Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル

Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...

CSS 複数 3 列適応レイアウト実装の詳細な説明

序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...

MySQLに画像を保存する方法

1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

MySQL 8.0.15 インストール グラフィック チュートリアルとデータベースの基礎

MySQLソフトウェアのインストールとデータベースの基礎は参考用です。具体的な内容は次のとおりです。...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

Webフロントエンドスキル概要(個人の実務経験)

1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...

ウェブページの最も基本的なコード

◆お気に入りに追加例示するクリックすると、ブラウザのお気に入りメニューにウェブサイトが追加されます...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...

MySQLの行ロックとテーブルロックの意味と違いの詳細な説明

1. はじめに行ロックとテーブルロックの違いは面接で頻繁に出てくるはずです。MySQL のロックにつ...

JavaScriptはキュー構造プロセスを実現する

目次1. キューを理解する2. カプセル化キュー3. 太鼓をたたいて花を渡す場合1. キューを理解す...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

Linux リダイレクトの使用方法の詳細な説明

誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...