el-cascader多选懒加载回写

在使用element-ui的el-cascader组件进行多选时，如果需要实现懒加载并在回写时保留已选择的节点，可以参考以下的实现方式：

<template>
  <el-cascader
    :options="options"
    :props="props"
    v-model="selectedValues"
    @active-item-change="handleActiveItemChange"
    @check-change="handleCheckChange"
    collapse-tags
    filterable
    clearable
    :show-all-levels="false"
    multiple>
  </el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储选中的值，格式为[value1, value2, ...]
      options: [], // 级联选项
      props: {
        multiple: true, // 允许多选
        lazy: true, // 开启懒加载
        lazyLoad (node, resolve) {
          // 懒加载的回调函数，node为当前节点，resolve为数据加载完毕后的回调函数
          fetchData(node.data.value).then(childNodes => {
            // 模拟异步获取数据
            resolve(childNodes);
          });
        },
        value: 'value', // 每个节点的值的属性名
        label: 'label', // 每个节点的标签的属性名
        children: 'children', // 每个节点下子节点的属性名
      },
    };
  },
  methods: {
    handleActiveItemChange(nodeData) {
      // 当前激活节点变化时的回调
      // 可以在这里进行懒加载操作
    },
    handleCheckChange(node, isChecked, checkedNodes) {
      // 节点选中状态变化时的回调
      // 可以在这里处理选中节点的逻辑
    },
  },
  mounted() {
    // 初始化时可以加载顶级节点
    fetchData(null).then(topLevelNodes => {
      this.options = topLevelNodes;
    });
  }
};
 
// 模拟异步获取数据的函数
function fetchData(value) {
  // 这里应该是异步获取数据的操作，返回Promise对象
  // 示例中直接返回模拟的节点数据
  return Promise.resolve([
    { value: value ? value + '1' : 'root1', label: 'Label1', children: [] },
    { value: value ? value + '2' : 'root2', label: 'Label2', children: [] }
  ]);
}
</script>

在这个例子中，el-cascader组件被设置为多选，并启用了懒加载。在props中定义了lazyLoad方法，该方法会在节点展开时被调用。在mounted钩子中，可以加载顶级节点。用户每次展开节点时，都会触发懒加载的回写逻辑。在handleActiveItemChange和handleCheckChange方法中，可以处理更多的逻辑，例如记录选中的节点值以便于回写等。