Element Ui Cascader 多选实现原理

Element UI Cascader 组件的多选实现原理是基于 Vue.js 的 v-model 实现的。

首先，我们需要在 Cascader 组件中添加 multiple 属性，用于指定是否开启多选模式。当 multiple 为 true 时，Cascader 将支持多选，否则只支持单选。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :multiple="true">
</el-cascader>

接着，我们需要在 Vue 实例中定义 selectedOptions 变量，用于存储已选择的选项。由于 multiple 模式下，selectedOptions 可能包含多个选项，因此我们需要使用数组来存储。

data() {
  return {
    selectedOptions: []
  }
}

在 Cascader 组件中，当用户选择某个选项时，Cascader 会触发 change 事件，并将选择的选项传递给父组件。我们可以通过监听 change 事件来更新 selectedOptions 变量，从而实现多选功能。

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :multiple="true"
  @change="handleChange">
</el-cascader>

methods: {
  handleChange(selectedOptions) {
    this.selectedOptions = selectedOptions
  }
}

以上代码中，handleChange 方法会在用户选择某个选项时被调用，selectedOptions 参数表示当前已选择的选项。我们将 selectedOptions 赋值给 Vue 实例中的 selectedOptions 变量，从而实现多选功能。

最后，我们可以在模板中使用 selectedOptions 变量来显示已选择的选项。

<div>Selected Options: {{ selectedOptions }}</div>

这样，我们就成功地实现了 Element UI Cascader 组件的多选功能。