表格组件动态列key值刷新

应用场景：表格有列配置侧边栏，表格渲染后仍需要更改列配置，此时需要触发表格列的刷新

一、el-table

el-table动态列修改后，可以通过ref调用doLayout()方法重新渲染表格，该方法无任何问题，可以正常刷新表格列，列的配置数据等均可正常显示

<template>
  <div class="bs-bg-color-white bs-border-radius p16 mt5 font-container">
    <!-- 列表区域 -->
    <el-table ref="table" :data="tableData" border size="small" :height="500">
      <el-table-column :key="item.columnCode + i" :prop="item.columnCode" :label="item.columnName" header-align="center" :align="item.dataType === 'string' ? 'left' : 'right'" :min-width="item.columnWidth + 'px'" :fixed="item.isLocking === 1 ? 'left' : false" :show-overflow-tooltip="item.dataType === 'string'" :sortable="['asc', 'desc'].includes(item.sort)" v-for="(item, i) in activeTableTitle"></el-table-column>
    </el-table>
    <!--侧边栏设置-->
    <v-pur-table-col-setting :table-field-data="allTableTitle" :table-height="500" @update="handleUpdateSetting" />
  </div>
</template>
<script>
import { getSettingColField } from '@/modules/pur/common/service';
import vPurTableColSetting from '@/modules/pur/components/pur-table-col-setting';


export default {
  components: {
    vPurTableColSetting,
  },
  data() {
    return {
      allTableTitle: [],  //列头要素
      tableData: [{}], //表格数据
    };
  },
  methods: {
    /**
     * 初始化页面
     * 1、获取表头列数据
     * 2、获取表格数据
    */
    async initPage() {
      try {
        this.allTableTitle = await getSettingColField('pur/pur-rept-purplan-query');
      } catch (err) {
        console.error(err);
      }
    },
    /**
     * 更新表格列设置
     * 1、重新赋值表头数据
     * 2、刷新表格
    */
    handleUpdateSetting(val) {
      this.allTableTitle = val;
      // doLayout刷新表格
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
  },
  computed: {
    /**
     * 激活列
     */
    activeTableTitle() {
      return this.allTableTitle.filter(e => e.isShow === 1);
    },
  },
  mounted() {
    this.initPage();
  }
}
</script>

二、vxe-table

• 通过ref调用刷新方法refreshColumn()，可以刷新列的宽度，固定列，列的宽度等，但列排序更改之后，无法正常刷新，需要通过key刷新
• key值为所有影响表格显示的字段拼接的值： :key="${item.columnCode}${item.columnWidth}${item.sort}${item.isLocking}"

<template>
  <div class="bs-bg-color-white bs-border-radius p16 mt5 font-container">
    <!-- 列表区域 -->
    <vxe-table ref="table" :data="tableData" border size="small" :height="500">
      <vxe-table-column :key="`${item.columnCode}${item.columnWidth}${item.sort}${item.isLocking}`" :field="item.columnCode" :title="item.columnName" header-align="center" :align="item.dataType === 'string' ? 'left' : 'right'" :min-width="item.columnWidth" :fixed="item.isLocking === 1 ? 'left' : ''" :sortable="['asc', 'desc'].includes(item.sort)" v-for="item in activeTableTitle"></vxe-table-column>
    </vxe-table>
    <!--侧边栏设置-->
    <v-pur-table-col-setting :table-field-data="allTableTitle" :table-height="500" @update="handleUpdateSetting" />
  </div>
</template>
<script>
import { getSettingColField } from '@/modules/pur/common/service';
import vPurTableColSetting from '@/modules/pur/components/pur-table-col-setting';


export default {
  components: {
    vPurTableColSetting,
  },
  data() {
    return {
      allTableTitle: [],  //列头要素
      tableData: [{}], //表格数据
    };
  },
  methods: {
    /**
     * 初始化页面
     * 1、获取表头列数据
     * 2、获取表格数据
    */
    async initPage() {
      try {
        this.allTableTitle = await getSettingColField('pur/pur-rept-purplan-query');
      } catch (err) {
        console.error(err);
      }
    },
    /**
     * 更新表格列设置
     * 1、重新赋值表头数据
     * 2、刷新表格
    */
    handleUpdateSetting(val) {
      this.allTableTitle = val;
      // 该方法刷新时，只对部分配置能够刷新，推荐使用key值刷新
      // this.$nextTick(() => {
      //   this.$refs.table.refreshColumn();
      // });
    },
  },
  computed: {
    /**
     * 激活列
     */
    activeTableTitle() {
      return this.allTableTitle.filter(e => e.isShow === 1);
    },
  },
  mounted() {
    this.initPage();
  }
}
</script>

综上所述，推荐直接统一设置key值来刷新列