vxe-table树行表格保存展开状态

VxeTable是一款Vue.js的高性能表格组件，它支持树形结构的数据展示，并允许用户保存表格的展开状态。当你需要处理具有嵌套层级的数据时，比如树状目录、组织架构等，可以利用VxeTable的`expand-state`属性来管理每一行的展开状态。

`expand-state`是一个对象数组，每个对象代表一行数据及其子节点的状态，包含字段如`expanded`表示当前行是否已展开，`children`则是一个数组，包含了该行的所有子节点及其状态。你可以将这个状态存储在前端的Vuex store或者本地浏览器的localStorage里，在页面刷新或切换时读取并应用这些展开状态。

以下是一个基本示例：

<template>
  <vxe-table :data="treeData" :expand-state="savedExpandState">
    <!-- 表头和列配置 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: ...,
      savedExpandState: [] // 初始化或从存储中获取的展开状态
    };
  },
  methods: {
    saveExpandState() {
      // 将当前展开状态保存到localStorage或其他地方
      localStorage.setItem('expandState', JSON.stringify(this.expandedRows));
    },
    loadExpandState() {
      // 从存储中加载上次保存的展开状态
      this.savedExpandState = JSON.parse(localStorage.getItem('expandState') || '[]');
    }
  },
  created() {
    this.loadExpandState();
  },
  watch: {
    treeData(newData) {
      this.savedExpandState = newData.map(row => ({
        ...row,
        children: row.children ? row.children.map(child => ({ ...child })) : []
      }));
    }
  }
};
</script>

每当数据变化时，你需要同步更新`savedExpandState`，并在切换页面或刷新时重新加载之前保存的状态。