vxe-table动态渲染列，刷新列宽_vxetable刷新

背景：

使用vxe-table渲染表格，支持列选和拖拽列宽，并可按用户记忆，支持一键恢复默认列选、列宽，因此使用v-for动态渲染列。当点击一键恢复的时候，需要恢复成默认的列选及列宽。

问题：

使用vxe-table，用v-for渲染列，修改列宽调用vxe提供的refreshColumn和recalculate方法都不生效。表格列宽没有重新渲染。

解决方案：

利用vue触发重新渲染的机制，给表格绑定key为随机生成的字符串，当点击一键恢复时，重新生成一段新的随机字符串赋值给表格绑定的key，这样就会触发表格的重新渲染。

代码示例：

<template>
    <vxe-table
      ref="table"
      :key="tableKey"
      :data="tableData"
      border>
      <vxe-column
        v-for="item in showColumns"
        :key="item.field"
        :field="item.field"
        :type="item.type"
        :title="item.title"
        :fixed="item.fixed"
        :align="item.align"
        :sortable="item.sortable ? item.sortable : false"
        :formatter="item.formatter"
        :class-name="item.class"
        :show-overflow="item.overflow ? item.overflow : 'tooltip'"
        :visible="item.visible"
      >
        </vxe-column>
    </vxe-table>
</template>
 
export defalut {
 
  data(){
        tableKey:Math.random()
    },
  methods:{
    refreshTable(){
      this.tableKey = Math.random()
    }, 
  }
}