iviewUI Checkboxマルチ選択ボックスマルチグループ全選または全選しない問題
3602 ワード
1.需要:カテゴリをクリックすると、すべて選択またはすべてキャンセルできます.次のサブオプションをすべて選択すると、親タイプが選択されます.
2.適用シーン:一般的に権限リストの多層チェックに使用する
3.解決構想:1つの多組の選択されたコンポーネントを単独でカプセル化し、これによって他のカテゴリが同時に選択された問題を解決する
親コンポーネント:
サブコンポーネント:authority-listを作成するvueサブアセンブリ
OK、仕事を終わらせます!如果能实现点赞分享,谢谢老铁~
2.適用シーン:一般的に権限リストの多層チェックに使用する
3.解決構想:1つの多組の選択されたコンポーネントを単独でカプセル化し、これによって他のカテゴリが同時に選択された問題を解決する
親コンポーネント:
methods: {
//
getChildCheck (icon, val) {
this.checkedObj[icon] = val
},
//
handleAuthoritySubmit () {
//todo
}
}
サブコンポーネント:authority-listを作成するvueサブアセンブリ
{{title}}
{{single.title}}
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、仕事を終わらせます!如果能实现点赞分享,谢谢老铁~