<el-table :data="tableData" >
<template v-for="(item, index) in tableLabel">
<el-table-column
:key="index"
align="center"
:type="item.type"
:prop="item.prop"
:width="item.width"
:column-key="item.prop"
:render-header="renderHeader"/>
</template>
</el-table >
data () {
return {
tableLabel：[{type:'day',prop:'day',width:120,label:'日'},{type:'hour',prop:'hour',width:120,label:'小時'}],
tableData：[{day:'20200729',hour:'03'},{day:'20200730',hour:'03'}],
}
},
methods: {
// render 事件
renderHeader(h, { column, $index }) { // h即為cerateElement的簡寫，具體可看vue官方文檔
return h(
'div',
[
h('span', column.label),
h('i', {
class: 'el-icon-refresh',
style: 'color:#409eff;margin-left:5px;pointer-events: auto;',
on: {
click: () => { //一定要用箭頭函數
this.switchClick($index, column)
}
}
}, '')
]
)
},
switchClick(index, data) {
console.log(index)
}
}