技術共有

要素はカスタムヘッダーをどのように実装しますか?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

場合によっては、ヘッダーにボタンを追加するなど、カスタム ヘッダーを使用する必要があります。ただし、カスタム ヘッダーの使用方法については、比較的簡単に説明します。今日は詳細を。

カスタム ヘッダーを有効にするには、カスタム ヘッダーが必要なヘッダーで :render-header を使用します。

<el-table-column :render-header="button"></el-table-column>

button はボタンを返すことができるカスタム メソッドです。

注: button メソッドで返される button 要素については、@click または v-on:click を使用してそれに click メソッドを追加することはできません。認識されず、エラーが報告されます。アロー関数を使用するには、on-click={()=&gt;this.showinfo()}

ここではボタンが設定されており、現在どのボタンがクリックされているかを記録する変数があります。

データ(){

戻る{

isShow: true // ボタンを制御する変数、ボタンをクリック

   }

},

メソッド: {

ボタン(){

if(this.isShow==true){

//ボタンがクリックされた場合、ボタンの背景色を切り替えます

戻る (

            <div>

<el-button on-click={()=>this.show()} style="background: #ffc9c9; color:#606266"&gt;按钮</el-button>