vue+element 级联选择器一级单选，二级多选

YangHuan3

已于 2023-04-24 17:25:26 修改

阅读量1.2k

点赞数 3

分类专栏： vue element 文章标签： vue.js javascript elementui

于 2023-04-24 16:56:33 首次发布

本文链接：https://blog.csdn.net/qianluo111/article/details/130346930

版权

vue 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

element

4 篇文章 0 订阅

订阅专栏

这篇文章展示了如何在Vue.js应用中使用el-cascader组件实现多选功能，并在值改变时动态过滤选项。通过监听change事件，当选择项变更时，代码会更新shareScope变量并过滤出与之匹配的子选项。

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

话不多说直接上代码

图例：

<template>
  <div>
    <el-cascader v-model="casValue" :props="{ multiple: true }" :options="options" @change="change" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      casValue: [],
      value: [],
      shareScope: '-1',
      options: [
        {
          value: 'zhinan',
          label: '指南'
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic'
            },
            {
              value: 'form',
              label: 'Form'
            },
            {
              value: 'data',
              label: 'Data'
            },
            {
              value: 'notice',
              label: 'Notice'
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源'
        }
      ]
    }
  },
  methods: {
    change(val) {
      for (var i = 0; i < val.length; i++) {
        if (val[i][0] !== this.shareScope) {
          this.shareScope = val[i][0]
          break
        }
      }
      const filterd = val.filter((v) => v[0] === this.shareScope)
      this.casValue = []
      this.casValue.push(...filterd)
    }

  }
}
</script>