iviewUI Checkboxマルチ選択ボックスマルチグループ全選または全選しない問題


1.需要:カテゴリをクリックすると、すべて選択またはすべてキャンセルできます.次のサブオプションをすべて選択すると、親タイプが選択されます.
2.適用シーン:一般的に権限リストの多層チェックに使用する
3.解決構想:1つの多組の選択されたコンポーネントを単独でカプセル化し、これによって他のカテゴリが同時に選択された問題を解決する
親コンポーネント:

        
{{items.title}}
methods: { // getChildCheck (icon, val) { this.checkedObj[icon] = val }, // handleAuthoritySubmit () { //todo } }

 
サブコンポーネント:authority-listを作成するvueサブアセンブリ


export default {
  name: 'AuthorityList',
  props: ['singleList', 'title', 'icon', 'checkedAuth'],
  data () {
    return {
      checkboxSize: 0,
      indeterminate: false,
      checkAll: false,
      checkAllSingleGroup: [],
      newArr: []
    }
  },
  watch: {
    'checkAllSingleGroup': function (val) {
      this.$emit('checkedChild', this.icon, val)
    },
    'checkedAuth': function (val) {
      // console.log(val)
      this.checkAllSingleGroup = []
      this.singleList._child.forEach(item => {
        val.map(value => {
          if (value === item.name) {
            this.checkAllSingleGroup.push(value)
          }
        })
      })
      this.checkAllSingleGroupChange(this.checkAllSingleGroup)
    }
  },
  methods: {
    handleCheckAll (arr) {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      let singleCheckedGroup = []
      let singleObj = {}
      if (!Array.isArray(arr)) {
        return
      }
      if (arr.length === 0) {
        this.$emit('checkedMenuChange', this.icon, this.checkAll)
        return
      }
      for (let i = 0; i < arr.length; i++) {
        singleObj = arr[i]
        singleCheckedGroup.push(singleObj.name)
      }

      if (this.checkAll) {
        this.checkAllSingleGroup = singleCheckedGroup
      } else {
        this.checkAllSingleGroup = []
      }
    },
    checkAllSingleGroupChange (data) {
      if (data.length === this.singleList._child.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    }
  }
}

OK、仕事を終わらせます!如果能实现点赞分享,谢谢老铁~