<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
}
})
])
},
}