element ui 如何实现cascader多选的，解析源码功能。

在 Element UI 中，Cascader 是一个级联选择器，支持单选和多选两种模式。如果需要实现多选功能，需要在 `el-cascader` 标签上添加 `:show-all-levels="false"` 和 `:check-strictly="true"` 属性。

其中，`:show-all-levels="false"` 表示仅显示最后一级的选项，而不是所有级别的选项；`:check-strictly="true"` 表示只能选择叶子节点，而不能选择中间节点。

在源码中，多选的实现主要是通过 `handleCheckChange` 函数实现的。该函数会在用户点击多选框时被触发，获取到当前节点的选中状态，并且根据 `checkStrictly` 属性的值来判断是否需要递归更新所有子节点的状态。

同时，多选的显示也是通过 `render` 函数实现的。在 `render` 函数中，会根据当前节点的选中状态来判断是否需要显示多选框，并且在用户点击多选框时触发 `handleCheckChange` 函数来更新节点的选中状态。

总的来说，Element UI 实现 Cascader 多选的功能主要是通过维护节点的选中状态，并且通过递归更新子节点的选中状态来实现的。

相关问题

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 组件的多选功能。

element ui 表单提交多选

对于element-ui的el-table表格复选框，可以通过使用selection-change事件来实现多选和单选的功能。具体的代码实现如下：

<template>
  <el-button type="success" icon="el-icon-first-aid-kit" :disabled="multiple">多选</el-button>
  <el-button type="success" icon="el-icon-first-aid-kit" :disabled="single">单选</el-button>
  <el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
  </el-table>
</template>

在上述代码中，@selection-change="handleSelectionChange"表示当选择发生改变时，会执行名为handleSelectionChange的方法。在该方法中，可以通过获取选中的数据进行相应的处理，如获取选中的多条数据或者获取选中的单条数据。