ant-design-vue,表格树形数据父子关联选择完善

在线效果

组件使用

混合封装

const mixinTableTreeSelect = {data() {return {tabData: [],selectedRowKeys: []};},methods: {onSelectAll(selected) {if (selected) {const tabData = this.tabData;const arr = [];setVal(tabData, arr);this.selectedRowKeys = arr;} else {this.selectedRowKeys = [];}function setVal(list, arr) {list.forEach(v => {arr.push(v.key);if (v.children) {setVal(v.children, arr);}});}},onSelect(record, selected) {const set = new Set(this.selectedRowKeys);const tabData = this.tabData;const key = record.key;if (selected) {set.add(key);record.children && setChildCheck(record.children);setParentCheck(key);} else {set.delete(key);record.children && setChildUncheck(record.children);setParentUncheck(key);}this.selectedRowKeys = Array.from(set);// 设置父级选择function setParentCheck(key) {let parent = getParent(key);if (parent) {set.add(parent.key);setParentCheck(parent.key);}}// 设置父级取消，如果父级的子集有选择，则不取消function setParentUncheck(key) {let childHasCheck = false,parent = getParent(key);if (parent) {let childlist = parent.children;childlist.forEach(function(v) {if (set.has(v.key)) childHasCheck = true;});if (!childHasCheck) {set.delete(parent.key);setParentUncheck(parent.key);}}}// 获取当前对象的父级function getParent(key) {for (let i = 0; i < tabData.length; i++) {if (tabData[i].key === key) {return null;}}return _getParent(tabData);function _getParent(list) {let childlist,isExist = false;for (let i = 0; i < list.length; i++) {if ((childlist = list[i].children)) {childlist.forEach(function(v) {if (v.key === key) isExist = true;});if (isExist) {return list[i];}if (_getParent(childlist)) {return _getParent(childlist);}}}}}// 设置child全选function setChildCheck(list) {list.forEach(function(v) {set.add(v.key);v.children && setChildCheck(v.children);});}// 设置child取消function setChildUncheck(list) {list.forEach(function(v) {set.delete(v.key);v.children && setChildUncheck(v.children);});}}}
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！