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

推薦する

HTML ウェブページ画像タグ

画像タグ <IMG> を挿入します。今日私たちが目にするカラフルなウェブページはすべて、...

MySQL の 10 進数データ型の小数点埋め込み問題の詳細な説明

序文開発プロセスでは、10 進データ型がよく使用されます。 MySQL では、小数点は正確なデータ型...

Javascript の奇妙な点をご存知ですか?

私たちのベテランの先人たちは、数え切れないほどのコードを書き、数え切れないほどの落とし穴に陥ってきま...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

MySQLクエリが遅い場合の理由と解決策

Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...

シンプルなフロントエンドのページング効果を実現する js

比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

MySQL の文字セット utf8 を utf8mb4 に変更する方法

MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...

Linux ターミナルでドメイン IP アドレスを見つけるコマンド (5 つの方法)

このチュートリアルでは、Linux ターミナルでドメイン名またはコンピューター名の IP アドレスを...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

JavaScript axiosのインストールとパッケージ化のケースの詳細な説明

1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...

ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...