vueH5级联组件，实现全选，非全选

实现效果：

vue代码：

js代码：

<script>
export default {
  name: 'selectPopup',
  components: {},
  data () {
    return {
      title: '',
      isVanshow: false,
      selectOneIdList: [],
      selectTwoIdList: [],
      selectNameList:[],
      selectList: [],
      firstIndex:1,
      options:[]
    }
  },
  mounted () {
  },

  methods: {
    firstClick(i){
      if(!i) return
      this.firstIndex = i
      this.options.map((item,index)=>{
        item.backColor = i === index
      })
    },
    firstChange(i,data){
      // 第一级全选/非全选   所有一级或二级全选/非全选
      if(i === 0){
        this.options.map((opt)=>{
          opt.checked = data.checked
          opt.iconClass = ''
          opt.children?.map((row)=>{
            row.checked = opt.checked
            row.iconClass = ''
          })
        })
      }else{
        // 第一级选中/取消，所有子级选中/取消
        data.children.map((item)=>{
          item.checked = data.checked
        })
        // 第一级所有的选中/取消，第一级的'全部'选中/取消
        let falseNUm = 0
        let trueNum = 0
        this.options.forEach((row,i)=>{
          if(!row.checked && row.iconClass !== 'line' && i){
            falseNUm ++
          }
          if(row.checked && row.iconClass !== 'line' && i){
            trueNum++
          }
        })
        if(trueNum === this.options.length-1 || falseNUm === this.options.length-1){
          this.options[0].checked = data.checked
          this.options[0].iconClass = ''
        }else{
          this.options[0].iconClass = 'line'
        }
      }
    },
    secChange(i,data){
      if(i === 0){
        // 处理二级的'全部'取消和勾选，对应的兄弟级和父级状态
        this.options[this.firstIndex].checked = data.checked
      }
      else if(!data.checked){
        let falseNum = 0
        this.options[this.firstIndex].children.map((opt,f)=>{
          if(!opt.checked && f){
            falseNum ++
          }
        })
        const childLength = this.options[this.firstIndex].children.length-1
        if(falseNum === childLength){
          // 第二级除了'全部',全部取消，则父级取消，所有兄弟级取消
          this.options[this.firstIndex].checked = data.checked
          this.options[this.firstIndex].iconClass = ''
          this.options[this.firstIndex].children[0].iconClass = ''

          // 判断如果此时第一级除了'全部'全取消,则'全部'取消
          let falseNUm = 0
          this.options.forEach((row,i)=>{
            if(!row.checked && row.iconClass !== 'line' && i){
              falseNUm++
            }
          })
          if(falseNUm === this.options.length-1){
            this.options[0].checked = data.checked
            this.options[0].iconClass = ''
          }else{
            this.options[0].iconClass = 'line'
          }
        }else{
          // 第二级，取消除了'全部'的任何元素，则'全部'显示'-',父级显示'-',第一级的'全部'显示'-'
          this.options[this.firstIndex].iconClass = 'line'
          this.options[this.firstIndex].children[0].iconClass = 'line'
          this.options[0].iconClass = 'line'
        }
      }
      else if(data.checked){
        let trueNum = 0
        this.options[this.firstIndex].children.map((opt,f)=>{
          if(opt.checked && f){
            trueNum ++
          }
        })
        const childLength = this.options[this.firstIndex].children.length-1
        if(trueNum === childLength){
          // 第二级除了'全部',全部选中，则父级选中，所有兄弟级选中
          this.options[this.firstIndex].checked = data.checked
          this.options[this.firstIndex].iconClass = ''
          this.options[this.firstIndex].children[0].iconClass = ''
          
          // 判断如果此时第一级除了'全部'全选中,则'全部'选中
          let trueNum = 0
          this.options.forEach((row,i)=>{
            if(row.checked && row.iconClass !== 'line' && i){
              trueNum++
            }
          })
          if(trueNum === this.options.length-1){
            this.options[0].checked = data.checked
            this.options[0].iconClass = ''
          }else{
            this.options[0].iconClass = 'line'
          }
        }else {
          // 第二级，选中除了'全部'的任何元素，则'全部'显示'-',父级显示'-'，第一级的'全部'显示'-'
          this.options[this.firstIndex].iconClass = 'line'
          this.options[this.firstIndex].children[0].iconClass = 'line'
          this.options[0].iconClass = 'line'
        }
      }
    },
    // 取消 关闭弹出框
    cancel () {
      this.isVanshow = false
      this.$emit('cancel')
    },
    // 确认
    confirm () {
      this.selectOneIdList = []
      this.selectTwoIdList = []
      this.selectNameList = []
      this.options.forEach((item,index)=>{
        if(item.checked && item.iconClass === '' && index){
          this.selectOneIdList.push(item.value)
          this.selectNameList.push(item.label)
        }else{
          item.children?.forEach((row,i)=>{
            if(row.checked && i){
              this.selectTwoIdList.push(row.value)
              this.selectNameList.push(row.label)
            }
          })
        }
      })
      this.isVanshow = false
      console.log("selectNameList",this.selectNameList)
      this.$emit('confirm', this.selectOneIdList,this.selectTwoIdList,this.selectNameList)
    },
    // 打开弹出窗
    isShow (str,list,name,isFirst) {
      this.title = str
      this.options= list
      this.isVanshow = !isFirst
    }
  }
}

</script>

css代码：