2021-09-17 vue el-table 自定义表头重复出现问题

<!-- 表格 -->
      <vTable
        ref="table"
        :max-height="listInfo.tableHeight"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        :total-count="totalCount"
        :page-num="formInline.pageNum"
        :page-size="formInline.pageSize"
        @getPageSize="handlePageSize"
        @getPageNum="handlePageNun"
        @handleSortChange="sortChange"
        @setHeader="setHeader"
      ></vTable>

直接赋值会导致自定义表头重复出现

// 更新表格表头
 this.tableColumns = this.columns.filter((item) => {
   return item.switchValue
 })

要先清空数据，在dom更新后循环之后再执行表格表头信息赋值

 // 先清空数据
 this.tableColumns = []
 // 在dom更新后循环之后再执行表格表头信息赋值
 this.$nextTick(() => {
   this.tableColumns = this.columns.filter((item) => {
   return item.switchValue
   })
 })