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

推薦する

フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。

1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...

Linux CentOS でスクリプトを定期的に実行するように設定する方法

多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...

CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明

CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コン...

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

Flash ファイル形式: .FLV および .SWFフラッシュ ビデオ形式には、.flv と .s...

Jmeterはデータベースプロセスダイアグラムに接続します

1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

CocosCreatorでシューティングゲームを作る詳しい解説

目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...

MySQLのマスタースレーブ構成を使用して、読み取りと書き込みの分離を実現し、データベースの負荷を軽減します。

大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...

CentOs システムで Python と yum をアンインストールするソリューション

事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...

CSS で点線の境界線のスクロール効果を実装するサンプルコード

マウスをある領域の上に置くと、その領域に点線の境界線と線のアニメーションが表示されるというクールな効...

Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

1. setUp関数の最初のパラメータpropsセットアップ(プロパティ、コンテキスト){}最初のパ...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

Web 標準アプリケーション: Tencent QQ ホームページの再設計

Tencent QQのホームページがリニューアルされ、Webフロントエンド開発がますます注目を集めて...

JavaScript におけるイベント委譲メカニズムと深いコピーと浅いコピーの簡単な分析

目次1. イベントの委任イベントバブリングイベントキャプチャイベントの泡立ちの昇華考える2. 深いコ...