el-cascader 一级单选二级多选

不完美女孩-

于 2023-03-30 09:58:04 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LJJONESEED/article/details/129851650

该文章描述了一个Vue组件（el-cascader）在v-model绑定的值发生变化时的处理逻辑。当shareScopeEnd数组为空时，直接赋值；否则，对比新值与原值的一级标签，若不同则更新值。同时，展示了如何使用CSS类隐藏第一级的checkbox。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-cascader v-model="postValue" expand-trigger="hover" :options="postOptions"  popper-class="disableFirstLevel" :props="props" ref='postSelectRef' @change='postValueChange'></el-cascader>

shareScopeEnd: [],

postValueChange(value) {
      let changeFlag = false;
      let nowItem = [];
      let firstItem = [];
      if (this.shareScopeEnd.length == 0) {
          this.postValue = value;
      } else {
          // 与原数组比对
          this.postValue.forEach((item) => {
              if (item[0] !== this.shareScopeEnd[0][0]) {
                  // 一级标签不同
                  changeFlag = true;
                  firstItem.push(item);
              }
          });
      }
      if (changeFlag && firstItem.length) {
          this.postValue = firstItem;
      } else if (!changeFlag && nowItem.length) {
          this.postValue = nowItem;
      }
      this.shareScopeEnd = this.postValue;
  },


.disableFirstLevel {
    .el-cascader-panel {
        .el-scrollbar:first-child {
            .el-checkbox {
                display: none;
            }
        }
    }
}