前情：VxeTable是一个老牌Vue table组件，有着丰富的API以及灵活性，适合用于复杂场景的使用。相比较elementUI中的table组件来说，能实现更多功能。详细可以参见官网文档。

环境

• VxeTable: v3.8.9
• Vue: v2.6.10

实现

<vxe-toolbar ref="toolbar" height="50" style="padding:5px 12px;" custom>
    <template #tools></template>
    <template #buttons></template>
</vxe-toolbar>
<vxe-table
    id="xtable"
    ref="xtable"
    ...
    :custom-config="{storage: true,restoreStore,updateStore}">
</vxe-table>
<script>
export default {
    mounted() {
        // 此处使用nextTick没有效果，使用了setTimeOut
        setTimeout(() => {
            this.$refs.xtable.connect(this.$refs.toolbar)
        });
    },
    methods(){
        // 自定义用户习惯获取
        async restoreStore(config){
          var res = await api.getConfig(this.$options.name,config.id);
          return res?.storeData;
        },
        // 自定义用户习惯保存
        updateStore(config){
          api.saveConfig({
            pageCd: this.$options.name,
            tableCd: config.id,
            config: JSON.stringify(config)
          })
        }
    }
}
</script>

解读

• vxe-table组件必须要有命名id属性，ref属性便于vue调用；

• vxe-toolbar组件提供配置修改的按钮，用于承接框架自带的popover框，便于修改表配置；

• vxe-toolbar组件并不是必须的，根据文档api-custom-config可看出，可以自定义popover出现的位置锚点；

• restoreStore和updateStore需要配置vxe-table的custom-config属性storage为true开启自定义配置，但是只开启storage属性的话，默认保存在浏览器的Local storage中。

  需要注意的是，Vxe-table组件的v3.8.x版本的配置数据结构与v3.7.x配置内容有差异，无法平滑使用，需要手动调整。

• 如果一个画面有多个table组件的话，需要注意id属性的命名，以及ref的调用问题，建议再将vxetable进行包装处理，可能会更加通用。

结语

持续学习，保持专注。