如下代码，在接口返回时，更新tableHeader，但是表头数据就是不更新。
<el-table ref="table" style="width:100%;" v-loading="loading" :data="list" show-summary :summary-method="getSummaries" :height="`72vh`">
<template v-for="(item,index) in tableHeader" >
<el-table-column :key="index" :prop="item.field" :min-width="item.width||'50'" align="center" >
<template #header>
<div>{{item.label}}</div>
<div v-if="item.target" style="margin-top:5px;padding-top:5px;border-top:1px solid #ccc;font-weight:400;">【{{item.target}}】</div>
</template>
<template slot-scope="scope">
{{item.label == '序号'? indexMethod(scope.$index):scope.row[item.field]}}
</template>
</el-table-column>
</template>
</el-table>
已尝试过
this.$forceUpdate()
将slot=“header” 改成#header
都无济于事。
最后使用随机数绑定key！
// 随便写个随机数
function getNum() {
return (+new Date()) + (parseInt(Math.random()*10000000))
}
// 赋值
this.tableHeader = this.tableHeader.map(item => {
this.$set(item, 'num', getNum())
// 其他赋值代码
})
数据结构：
tableHeader: [
{label: '序号', num: getNum()},
{label: '站点',num: getNum(),field: 'siteName'},
{label: '监测时间',num: getNum(),field: 'time', width: '110', target: '目标水质'},
{label: 'cod',num: getNum(),field: 'cod', target: '--', width: '80'},
{label: 'PH',num: getNum(),field: 'ph', target: '--', width: '80'},
{label: '水温',num: getNum(),field: 'sw', target: '--', width: '80'},
{label: '溶解氧(mg/L)',num: getNum(),field: 'rjy', target: '--', width: '90'},
{label: '浊度(NTU)',num: getNum(),field: 'zhd', target: '--', width: '90'},
{label: '电导率(uS/cm)',num: getNum(),field: 'ddl', target: '--', width: '90'},
{label: '氨氮(mg)',num: getNum(),field: 'ad', target: '--', width: '90'},
{label: '总磷(mg/L)',num: getNum(),field: 'zl', target: '--', width: '90'},
{label: '叶绿素(mg/L)',num: getNum(),field: 'yls', target: '--', width: '90'},
{label: '蓝藻(ug/L)',num: getNum(),field: 'lz', target: '--', width: '90'},
]
搞定！
