el-table异步动态表头不更新

2023-03-20  本文已影响0人  Shmily_1

如下代码,在接口返回时,更新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'},
        ]

搞定!

上一篇下一篇

猜你喜欢

热点阅读