element-ui中级联选择器第一级单选,第二级多选

446 阅读1分钟

image.png

image.png

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

<script>
export default {
  data() {
    return {
      casValue: [],
      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 = [].concat(filterd);
    },
  },
};
</script>