elementui级联选择器如何实现一级单选二级多选？？

Z时代
2024-02-12
分类：IT

自己写的有点问题一级的单选每次选中之后之后取消checked才能点其他的一级选项

<template>
  <div class="login">
    <div class="content">
      <el-cascader
        v-model="casValue"
        :props="props"
        :options="options"
        @change="change"
      ></el-cascader>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      casValue: [],
      props: { multiple: true },
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则'
            },
            {
              value: 'daohang',
              label: '导航'
            }
          ]
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic'
            },
            {
              value: 'form',
              label: 'Form'
            },
            {
              value: 'data',
              label: 'Data'
            },
            {
              value: 'notice',
              label: 'Notice'
            },
            {
              value: 'navigation',
              label: 'Navigation'
            },
            {
              value: 'others',
              label: 'Others'
            }
          ]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ]
    }
  },
  methods: {
    change(item) {
      console.log(item)
      let tag = item.at(-1)
      console.log(tag)
      let arr = item.filter((e) => {
        return e[0] === tag[0]
      })
      this.casValue = arr
    }
  }
}
</script>