使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选（亲测有效）

最新推荐文章于 2025-02-28 16:50:55 发布

冰眸js

最新推荐文章于 2025-02-28 16:50:55 发布

阅读量2k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/bingmoujs/article/details/134203843

版权

文章介绍了如何在使用VueElementUI的el-cascader组件时，移除第一级的复选框，并在一级分类改变时清空已选值的技巧。作者提供了HTML结构、CSS样式和相关函数实现的代码示例。

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

思路：1.把第一层的复选框去掉

2. 在第一层切换的时候，如果第一次分类改变了，把已有的值清空


html部分：
 
<el-cascader
            :popper-class="'first-no-check-cascader'"
            v-model="settingTypeValue"
            :options="treeData"
            :props="{
              value: 'id',
              label: 'name',
              children: 'children',
              emitPath: false,
              multiple: true,
            }"
            :show-all-levels="true"
            clearable
            @expand-change="changeSourceType"
          >
          </el-cascader>
 
 
css部分:
 
// 级联选择器，第一级不需要复选框
.first-no-check-cascader {
  .el-cascader-panel {
    .el-cascader-menu:first-child {
      .el-cascader-node {
        .el-checkbox {
          display: none !important;
        }
      }
    }
  }
}
 
函数部分：
cascaderTag:[], // 暂存点击时已有的tag
changeSourceType(selectItem) {
      // 一级分类只能选一个，如果一级分类修改了，清空已有值
      if (!this.cascaderTag.includes(selectItem[0])) {
        this.settingTypeValue = [];
      }
      this.cascaderTag = selectItem;