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で跳ねるボールのアニメーションを実現

推薦する

mysql コマンドライン スクリプトの実行例

この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

Linux ユーザーとグループのコマンド例分析 [切り替え、ユーザーの追加、権限制御など]

この記事では、Linux のユーザーおよびグループのコマンドについて例を挙げて説明します。ご参考まで...

なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 hea...

JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法

目次1. 自己列挙可能なプロパティ2. Object.values()はプロパティ値を返します3. ...

Linux でのスケジュールされたタスクと遅延タスクの詳細な説明

で+ 時間 17:23に at> touch /mnt/file{1..9} ##アクションを...

ネイティブ js でカスタム スクロール バーを実装する

この記事の例では、カスタムスクロールバーを実装するためのjsの具体的なコードを参考までに共有していま...

MySQLはinet_atonとinet_ntoaを使用してIPアドレスデータを処理します。

この記事では、適切な形式を使用して IP アドレス データをデータベースに保存し、IP アドレスを簡...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

Vue再帰コンポーネントの簡単な使用例

序文多くの学生は既に再帰に精通していると思います。アルゴリズムの問​​題を解決するために再帰がよく使...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

Taobao の商品画像切り替え効果を実現する JavaScript

JavaScriptの服装アルバム切り替え効果(Taobao商品画像切り替えに似ています)、参考ま...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

MySQLクエリが遅い理由

目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...