vue+ts 实现复杂级联选择

Myth丶恋晨 2023-10-18 10:28 3阅读 0赞

**一：问题描述：**

用户购买课程，

预期效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_27_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_27_color_FFFFFF_t_70 1][]

#### **二.级联选择器的需求** ####

1.vue+ ts 实现可复用组件

2.已经购买的课程显示disabled且只读

3.点击每级的checkbox实现子级的全选与取消全选

4.点击每个tab显示子级的所有课程且添加背景

5.子级未全选父级显示选一半状态

#### **三 .组件设计** ####

**输入**： isEditCourse控制级联选择的弹框显示，navTitles 为级联选择器的nav数组 ，searchCourseDataTo存储级联选择器的数据数组。类型为：

interface ISearchData {
      objectId: string;
      firstStage: string;//第一级
      secondStage: string;//第二级
      thirdStage: string;//第三级
      isSelected: boolean;//控制checkbox
      isDisabled: boolean;//是否只读
    }

**组件的使用**：

**实现思路**：当组件调用时触发getFirstArr()获取第一级的数据，注意：需要去重且当一种类型下有多个课时且有一个为只读时当前的tab的isOneSelect && isSelected属性应为true（即状态为显示一半），当子集全为只读时 !isOneSelect && isSelected属性应为true, 获取第二级思路与第一级相同、

四.实现

用户点击checkbox按钮时，分三种情况，

1.子级无只读项 ：这种情况是最简单的一种，只需将所有的firstStage 等于当前 firstStage 的isSelected 取 当前值

2.子集有只读项： 当子集含有只读项时，用户每次点击checkbox时 修改的是 isOneSelected（控制按钮的状态为显示一半） 项

3.子集全为只读项： 当子集全为只读时用户点击checkBox禁止修改按钮的状态，即不做任何改变

注意： 当用户点击第二级时，第一级需要根据子集是否全选改变上一级的按钮状态。这也是这个组件逻辑的难点之一，

所有的父级按钮的状态（是否为选中一半状态）都需要响应子级的变化。

核心代码

1.当组件调用时触发getFirstArr()获取第一级的数据，

private getFirstStage() {
        var _firstStage: string[] = []
        this.firstStageArr = []
        this.classDataAll.forEach(element => {
          if (!_firstStage.includes(element.firstStage)) {
            _firstStage.push(element.firstStage)
            this.firstStageArr.push({
              isSelected: element.isSelected,
              firstStage: element.firstStage,
              isOneSelected: false
            })
          } else if (element.isBuy) {
            // 如果一个课程类型下有多个课时且用户已经有某课时的权限时，课程类型为选中状态
            this.firstStageArr = this.firstStageArr.map(e => {
              if (e.firstStage === element.firstStage) {
                e.isSelected = element.isBuy
              }
              return e
            })
          }
        })
        // 判断第一级的下级是否全选
        this.getSelectAllFirstStageNext()
      }

2.点击checkbox 事件

private selectFirstStages(index: number) {
        this.secondStageArr = []
        this.thirdStageArr = []
        this.isSelectedFirstStage = index
        var _isSelected = false
        var _isBuy = false
        _isSelected = (this.firstStageArr[index].isSelected && this.firstStageArr[index].isOneSelected) ? true : !this.firstStageArr[index].isSelected
        // 类型下是否有已购买的课程
        _isBuy =this.classDataAll.some(e => e.isBuy && e.firstStage === this.firstStageArr[index].firstStage)
        this.classDataAll.forEach(e => {
          if (e.firstStage === this.firstStageArr[index].firstStage) {
            if (this.firstStageArr[index].isOneSelected) {
              e.isSelected = _isSelected
              this.firstStageArr[index].isSelected = true
              this.firstStageArr[index].isOneSelected = false
            } else {
              e.isSelected = e.isBuy ? e.isBuy : _isSelected
              this.firstStageArr[index].isSelected = _isSelected
            }
          }
        })
        // 取消全选时如果子列有已购买的课程则按钮的状态为选择一半
        if (!this.firstStageArr[index].isSelected && !this.firstStageArr[index].isOneSelected && _isBuy) {
          this.firstStageArr[index].isOneSelected = true
        }
        this.getSecondStage(this.firstStageArr[index].firstStage)//获取子级
        this.isUserSelectedSum()//获取已选择项的总和
        this.isFirstDisabled()// 当子级全为disabled状态时,父级禁止切换状态
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_27_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181026110954666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_27,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_27_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181026113831676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_27,color_FFFFFF,t_70