el-cascader级联选择器实现一级二级单选三级多选，选中未显示

程序媛_MISS_zhang_0110

已于 2024-01-05 09:51:59 修改

阅读量4k

点赞数 5

分类专栏： element-ui 文章标签： vue.js javascript elementui

于 2022-05-05 16:52:01 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/124591952

版权

element-ui 专栏收录该内容

37 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何使用 Element UI 的 el-cascader 组件实现一级二级单选和三级多选的功能，并解决选中状态不回显的问题。通过设置 props 属性和 change 事件监听，实现了不同层级的选择控制，并在选中值变化时对比旧值以确定回显。同时，提供了 CSS 样式以隐藏一级的复选框。

摘要由CSDN通过智能技术生成

一、页面显示效果

在这里插入图片描述

二、主要代码

  <el-form-item label="客户类型:">
	  <el-cascader
	             v-model="searchForm.customerTags"
	             :options="options"
	             :props="{ multiple: true }"
	             clearable
	             size='small'
	             collapse-tags
	             @change="changeLabel"
	             popper-class="disableFirstLevel"
	           >
	           <!-- :props="{ multiple: true, checkStrictly: true }" -->
	  </el-cascader>
 </el-form-item>

data(){
 return{
	  shareScopeEnd: [],
	  ptions: [],
    }
 },
   changeLabel(val) {
          // 是否与上次的类型相同
          let changeFlag = false
          let nowItem =[]
          let firstItem =[]
          if (this.shareScopeEnd.length == 0) {
            this.searchForm.customerTags = val
          } else {
            // 与原数组比对
            this.searchForm.customerTags.forEach((item) => {
              if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
                changeFlag = true
                firstItem.push(item)
              } else if (item[1] != this.shareScopeEnd[0][1]) { // 一级标签相同但是二级标签不同
                changeFlag = false
                nowItem.push(item)
              } 
            })
          }
          if (changeFlag  && firstItem.length) {
             this.searchForm.customerTags=firstItem
          }else if(!changeFlag && nowItem.length){
            this.searchForm.customerTags=nowItem
          }
           this.shareScopeEnd = this.searchForm.customerTags
        },

<style lang="scss">
.disableFirstLevel{
    .el-cascader-panel {
    .el-scrollbar:first-child {
      .el-checkbox {
        display: none;
      }
    }
    // .el-scrollbar:nth-child(2) {
    //   .el-checkbox {
    //     display: none;
    //   }
    // }
  }
}