Element-UI 多联选择器el-cascader，第一级单选，二三级多选

麦林斯khoo

已于 2023-06-05 13:42:49 修改

阅读量1.1k

点赞数 2

文章标签： vue.js javascript elementui

于 2023-06-05 13:39:50 首次发布

本文链接：https://blog.csdn.net/Khoo5323/article/details/131046283

版权

文章讲述了在Vue.js应用中如何使用el-cascader组件进行多级选择，并处理多选情况。通过v-model、options和props属性设置，配合JavaScript的change事件监听和数组方法，实现选中项的父级值同步到tag变量，并过滤出与tag匹配的选项进行值的更新。

摘要由CSDN通过智能技术生成

第一级单选，二三级多选

html

<el-cascader
 v-model="value"
    :options="options"
    :props="props"
    clearable
@change=“change”
></el-cascader>

js

data里面要存tag，value，options（下拉框数据），props: { multiple: true }（多选）,

change(item) {
      item.some((i) => {
        if (i[0] != this.tag) {
          this.tag = i[0];
          return true;
        }
        // console.log(i)
      }); // 如切换勾选，则让标识符的值等于勾选的父级的value
      let filterd = item.filter((v) => v[0] == this.tag); // 过滤出与标识符相符的选项
      this.value= [];
      this.value.push(...filterd);
    }