Compartilhamento de tecnologia

Como o elemento implementa um cabeçalho personalizado?

2024-07-12

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

Às vezes precisamos implementar um cabeçalho personalizado, como adicionar um botão ao cabeçalho. Neste momento, precisamos usar um cabeçalho personalizado. No entanto, a descrição oficial do uso de cabeçalhos personalizados é relativamente simples. detalhe hoje.

Use :render-header no cabeçalho onde um cabeçalho personalizado é necessário para ativar o cabeçalho personalizado:

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

button é um método personalizado que pode retornar o botão.

Nota: Para o elemento de botão retornado no método de botão, você não pode usar @click ou v-on:click para adicionar um método de clique a ele. Ele não será reconhecido e um erro será relatado. Para usar a função de seta, on-click={()=&gt;this.showinfo()}

Um botão é configurado aqui e há uma variável para registrar qual botão está clicado no momento:

dados(){

retornar{

isShow: true // Variável para controlar o botão, clique no botão

   }

},

métodos: {

botão(){

se(this.isShow==true){

//Se o botão for clicado, muda a cor de fundo do botão

retornar (

            <div>

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