element-自定义表头

1、自定义表头及添加点击事件

  示例：

  

 

 代码

 

 

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

methodts: {
    
    //   自定义表头
    renderHeader(h, {column,$index}){
       // column列数据 $index当前列索引
        let columnHtml = ''
        if (column.label == '库存') {
            columnHtml = `<div>${column.label}<span class="table__th__tip"><i>*</i> 批量增减</span></div>`
        } else if (column.label == '成本价' || column.label == '销售价' ) {
            columnHtml = `<div>${column.label}<span class="table__th__tip"><i>*</i> 批量修改</span></div>`
        } else {
            columnHtml = column.label
        }
        return h('span', {
            domProps: {
                innerHTML: columnHtml
            },
            on: {
                click: () => {
                    this.headerSet({column: column.label, index: $index})
                }
            }
        })
    },
    // 表头事件

     headerSet（obj） {

 

    }

}