完整代码如下:
<template>
<div>
<div>
<el-checkbox-group v-model="formData">
<el-checkbox label="date">日期</el-checkbox>
<el-checkbox label="name">姓名</el-checkbox>
<el-checkbox label="address">地址</el-checkbox>
</el-checkbox-group>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column prop="slhool" label="学校"/>
<el-table-column
v-for="item in formData"
:key="item"
:label="item"
:render-header="renderHeaderDate">
<template slot-scope="scope">
{{ scope.row[item]}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData:[
{
date:'2021',
name:'历史',
address:'辽宁省',
slhool:'体育'
},
{
date:'2022',
name:'数学',
address:'安徽省',
slhool:'音乐'
}
],
formData:['date', 'name','address']
}
},
methods:{
renderHeaderDate(h, { column, $index }){
if(column.label == 'date'){
return '日期'
}else if(column.label == 'name'){
return '姓名'
}else if(column.label == 'address'){
return '地址'
}else{
return '学校'
}
}
}
}
</script>
图例: