Add a custom style (check mark) to the table header in elementUI

Recently, the table component of elementUI is used in the project development, and the verification mark is set in the head of the table. I want to add a custom html tag in the head of the table.

The result is as follows:

 

Solution: use render-header

1. Bind the render-header attribute on the column

 <el-table-column :label="地址" :render-header="renderHeader"></el-table-column>

2. Then add the renderHeader method in methods (you can refer to the detailed explanation of elementUI official website rtable)

methods: {
    renderHeader(h) {
      return (
        <div>
          <span style="color:red">*</span>
          <span>地址</span>
        </div>
      )
    },
 }