美文网首页
el-table异步动态表头不更新

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

作者: Shmily_1 | 来源:发表于2023-03-20 18:05 被阅读0次

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

    搞定!

    相关文章

      网友评论

          本文标题:el-table异步动态表头不更新

          本文链接:https://www.haomeiwen.com/subject/swfprdtx.html