element table组件自定义表头

 <el-table
          :data="tableData"
          style=" 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            :render-header="renderHeader"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>

js部分

data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
    }
}

methods: {
 
  renderHeader(h, { column, $index }) {
    return h('el-checkbox',{
      nativeOn:{
        click:(value) =>{
          // 阻止事件冒泡
          value.stopPropagation()
        },
        change: (value) => {
          // 阻止事件冒泡
          value.stopPropagation()
          // 判断选中
          if(value.target.checked){
            console.log(column,value)
          } else {
            console.log('未选中')
          }
        },
      },
    },[
      h("span", {
        domProps: {
          innerHTML:  column.label
        }
      })
    ])
  },
}