关于el-cascader 懒加载多选回显

Question

有没有会 el-cascader 懒加载多选回显 的，能否给我一个思路。

Answer 1

使用 el-cascader 组件进行懒加载多选回显，可以在页面初始化时使用 el-cascader 的 props 属性 value 进行初始化，该属性表示当前选中的值，并且要使用数组的形式表示。

例如，在使用懒加载的情况下，可以在初始化时将 el-cascader 组件的 value 属性设置为当前选中的值的数组，如下所示：

<el-cascader
  ref="cascader"
  :options="options"
  :props="cascaderProps"
  :value="selectedValues"
  @change="handleChange"
  @active-item-change="handleActiveItemChange"
  filterable
  clearable
  multiple
  style="width: 100%"
></el-cascader>

在这里，selectedValues 是一个数组，表示当前选中的值。
接下来，在组件的数据中，可以定义一个 selectedValues 变量，并在初始化时设置为当前选中的值的数组，如下所示：

data() {
  return {
    selectedValues: [], // 当前选中的值的数组
    options: [], // 级联选择器的数据源
    cascaderProps: {
      value: 'value',
      label: 'label',
      children: 'children'
    }
  }
}

最后，在组件的方法中，可以定义一个 handleChange 方法，用来处理级联选择器的值改变事件，在该方法中，可以将新的选中值设置到 selectedValues 变量中，以实现多选回显的效果。