ElTableColumn のコンテンツをカスタマイズする方法

今回は、ElTableColumnの内容をカスタマイズする方法と、ElTableColumnの内容をカスタマイズする際の注意点について説明します。以下は実際のケースですので、見てみましょう。

会社には新しい要件があります。ElTableColumn の先頭をクリックして検索します。私の同僚はすでにこの関数を作成していますが、これをコンポーネントにカプセル化し、それについて学ぶ予定です。

ElTableColumn は元々こんな感じでした:

やりたいことはこんな感じです:

コードを直接載せただけなので、いちいち説明するのは多すぎます。

コード構造:

コンポーネント

import ElTableColumnPro from './ElTableColumnPro'
ElTableColumnPro.install = function(Vue) {
 Vue.component(ElTableColumnPro.name, ElTableColumnPro);
};
export default ElTableColumnPro;

インストール

import ElTableColumnPro from 'components/ElTableColumnPro/index' 
...
...
...
Vue.use(ElTableColumnPro)

使用

コメントは隣り合って入力されません....

この後の方法はマスターできたと思います。この記事の事例を読んで、さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2はショッピングカートアドレス選択を実装

Angularサーバーサイドレンダリングメソッドの概要

以上がElTableColumn のコンテンツをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。