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

推薦する

Tomcat ソースコード起動コンソールの中国語文字化けのデバッグプロセス記録

問題を見つける今日はTomcatのソースコードを勉強するつもりなので、公式サイトからTomcatのソ...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

MySQLのロック機構に関する最も包括的な説明

目次序文グローバルロック完全なデータベース論理バックアップFTWRL と set global re...

Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...

Python の MySQL データベース LIKE 演算子の詳細な説明

LIKE 演算子は、列内の指定されたパターンを検索するため、WHERE 句で使用されます。文法: 列...

JavaScript で二分探索木を実装する

JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...

JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

17の広告効果測定の解釈

1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

Docker で Maven プロジェクトをより速くビルドする

目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

ウェブページ内のFlash SWFファイルを変更する方法

これは多くの人が遭遇した問題だと思います。実際、Web ページから FLASH をダウンロードして修...

MySQL インデックス プッシュダウンの詳細

目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...