Technology Sharing

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

Sometimes we need to implement a custom header, such as adding a button to the header. At this time, we need to use a custom header, but the official description of the use of custom headers is relatively simple. Let's talk about it in detail today.

Use :render-header to enable custom headers on the table header where you need to use custom headers:

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

button is a custom method that can contain a return button.

Note: When adding a click method to the button element returned by the button method, you cannot use @click or v-on:click, as it will not be recognized and an error will be reported. You should use the arrow function on-click={()=&gt;this.showinfo()}

A button is set here, and there is a variable to record which button is currently clicked:

data(){

   return{

isShow: true // Control the button's variables, click the button

   }

},

methods: {

   button(){

      if(this.isShow==true){

// If the button is clicked, switch the background color of the button

         return (

            <div>

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