记: vue element Cascader 级联选择器 子级全选则传父级, 子级未全选则传子级

在思否一位大佬的评论中学到的, 但是忘记在哪个帖子了…

需求: 级联选择器中 子级全选则传父级key, 子级未全选则传子级key
element Cascader 级联选择器 中有一个方法: getCheckedNodes()

let CheckedNodes = this.$refs.region.getCheckedNodes()
CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.parent.checked))

其中 this.$refs.region 是对应赋予 Cascader 组件的 ref 名

通过 getCheckedNodes() 方法, 可以获取所有已勾选的节点

已知条件: 当父级勾选, 子级必定全选, 子级未全选, 则父级为不勾选状态

那么后面的 filter 方法中过滤条件的是 : !(父级存在 且 父级的勾选状态为true), 取反.

个人理解: 当父级不存在或父级的勾选状态为false时, 保留该节点.

效果图:

一直没注意看消息, 现补充上当时的代码 ( 2023.03.16 )

            <!-- 地区 城市 -->
            <el-form-item class="cities local">
              <el-cascader-panel ref="region" size="large" :options="citiesOptions"
                :props="citiesProps" v-model="checkedCities" @change="handleCheckedCitiesChange">
              </el-cascader-panel>
              <div class="citiesRight">
                <div class="citiesSelected">
                  <span>已选</span>
                  <div type="text" plain class="citiesEmpty" @click="emptyCitiesBtn">清空</div>
                </div>
                <div class="addCities">
                  <div class="addCitiesList" v-for="(item, index) in citiesList" :key="index.id">
                    {{ item.label }}
                    <i class="el-icon-close" @click="deleteNodeCities(item, index)"></i>
                  </div>
                </div>
              </div>
            </el-form-item>

.cities .el-form-item__content {
  display: flex;
  padding-left: 120px;
  height: 250px;
}
.el-form-item.cities {
  margin-bottom: 0;
}
.cities .el-cascader-panel.is-bordered {
  width: 56%;
}
/deep/ .el-cascader-menu {
  flex: 1;
  height: 100%;
}
.cities .el-checkbox {
  width: 10%;
}
.citiesRight {
  width: 25%;
  border: 1px solid #dee4f5;
  border-radius: 8px;
  margin-left: 30px;
  .citiesSelected {
    background: #eee;
    padding-left: 20px;
    .citiesEmpty {
      float: right;
      padding-right: 20px;
      color: rgb(64, 158, 255);
      cursor: pointer;
    }
  }
  .addCities {
    padding: 0 20px;
    height: 260px;
    overflow-x: hidden;
    .addCitiesList {
      background: #eee;
      padding-left: 20px;
      border-radius: 8px;
      position: relative;
      margin-top: 10px;
      border: 1px solid rgb(215, 215, 215);
      height: 30px;
      line-height: 30px;
      .el-icon-close {
        position: absolute;
        right: 10px;
        top: 30%;
      }
    }
  }
}
// 地区选择--高度
/deep/ .local .el-cascader-menu__wrap {
  margin-bottom: 0;
  height: 300px;
  width: 100%;
  // overflow-x: hidden;
}
/deep/ .el-form-item.cities .el-form-item__content {
  display: flex;
}

当没有全选深圳子级的时候, 就会把子级的值全带上, 如果我现在把坪洲这个选项带上, 那么深圳的半选状态就会变成全选, 同时, 右边的已选框会把子级全去掉, 变成只有深圳一个选项

data() {
   return {
   // 示例数据
   citiesOptions: [
        {
          value: 'shenzhen',
          label: '深圳',
          children: [
            { value: 'baoan', label: '宝安' },
            { value: 'baoan', label: '龙华' },
            { value: 'baoan', label: '福田' },
            { value: 'baoan', label: '龙岗' },
            { value: 'baoan', label: '坪洲' }
          ]
        },
        {
          value: 'xg',
          label: '香港',
          children: [
            { value: 'jl', label: '九龙' },
            { value: 'st', label: '沙田' },
            { value: 'yl', label: '元朗' }
          ]
        },
      ]
    }
}


    // 地区城市多选框
    handleCheckedCitiesChange(item) {
      let CheckedNodes = this.$refs.region.getCheckedNodes()
      // // console.log(CheckedNodes, '11111111')
      CheckedNodes = CheckedNodes.filter(option => !(option.parent && option.parent.checked))
      let idArr = []
      this.citiesList = []
      for (let i = 0; i < CheckedNodes.length; i++) {
        idArr.push(CheckedNodes[i].value)
        this.citiesList.push(CheckedNodes[i])
      }
      this.ruleForm.district_city_id = idArr
    }
    // 地区城市清空
    emptyCitiesBtn() {
      // 城市清空多选框
      this.checkedCities = []
      // 城市清空添加列表
      this.citiesList = []
      // 城市清空全选框
      // this.checkAll = false
      // // console.log('城市清空成功')
      this.ruleForm.district_city_id = []
    }
        // 城市地区删除按钮
    deleteNodeCities(item, index) {
      // // console.log(item, '11111111111')
      this.checkedCities = this.checkedCities.filter(option => {
        return option.indexOf(item.value) === -1
      })
      this.citiesList.splice(index, 1)
    }