Vue2 element 级联组件最后一级为多选其他为单选

上优

已于 2023-12-05 14:21:11 修改

阅读量1.2k

点赞数 25

文章标签： vue.js javascript 前端

于 2023-12-05 14:19:21 首次发布

本文链接：https://blog.csdn.net/weixin_65084919/article/details/134806286

版权

请添加图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .el-cascader-panel li[aria-haspopup] .el-checkbox {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" class="h-100vh flex justify-center items-center">
      <div>
        <el-cascader
          :props="{expandTrigger: 'click',multiple: true }"
          v-model="value"
          :options="options"
          @change="handleChange"
        ></el-cascader>

        <button @click="jieguo">结果</button>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            value: [],
            linshiVal: [],
            options: [
              {
                value: 'zhinan',
                label: '指南',
                children: [
                  {
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [
                      {
                        value: 'yizhi',
                        label: '一致',
                      },
                      {
                        value: 'fankui',
                        label: '反馈',
                      },
                    ],
                  },
                  {
                    value: 'daohang',
                    label: '导航',
                    children: [
                      {
                        value: 'cexiangdaohang',
                        label: '侧向导航',
                      },
                      {
                        value: 'dingbudaohang',
                        label: '顶部导航',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'zujian',
                label: '组件',
                children: [
                  {
                    value: 'basic',
                    label: 'Basic',
                  },
                ],
              },
            ],
          };
        },
        methods: {
          handleChange(val) {
            let is;
            if (val != 0) {
              is = val[val.length - 1].length - 1;
            }

            let changeFlag = false;
            let changeItem = null;
            if (this.linshiVal.length == 0) {
              this.value = val;
            } else {
              this.value.forEach((item, i) => {
                for (let e = 0; e < is; e++) {
                  if (item[e] !== this.linshiVal[0][e]) {
                    changeFlag = true;
                    changeItem = item;
                  }
                }
              });
            }
            if (changeFlag) {
              this.value = [];
              this.value.push(changeItem);
            }
            this.linshiVal = this.value;
          },
          jieguo() {
            console.log(this.value);
          },
        },
      });
    </script>
  </body>
</html>