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

这篇文章展示了如何在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>

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YangHuan3

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值