element-ui版本:2.13.0
在使用的树形表格配合多选框的时候:
百度一圈都没有找到答案,谷歌又不能用。不过问题还是要解决的嘛,就去读了一圈源码,迷迷糊糊的,不过还是搞清楚了一些东西。
template:
当勾选全选按钮的时候源码会调用 _toggleAllSelection,而在_toggleAllSelection会调用select-all,也就是我们自己绑定的@select-all=“selectDeptAll”。然后我就把_toggleAllSelection内部的操作都给注释了,实现自己的全选即可。( :treeCheckBox=“false” 就是这个标识一下执不执行)
_toggleAllSelection() {
......
this.table.$emit('select-all', selection);
},
methods:
methods: {
selectDeptAll() { // 自定义的select-all方法
this.deptCheckData = []; // data属性
if (this.$refs.multipleTable.selection.length === 0) {
this.deptSelectItem(this.deptData, true);
} else {
this.$refs.multipleTable.clearSelection();
}
},
deptSelectItem(data, b) { // 递归选中与不选中
data.map(item => {
if (b) { // 选中
if (item.children && item.children.length > 0) {
if (this.$refs.multipleTable.selection.findIndex(se => se.id === item.id) === -1){
this.$refs.multipleTable.selection.push(item);
}
this.deptSelectItem(item.children, b);
} else {
if (this.$refs.multipleTable.selection.findIndex(se => se.id === item.id) === -1){
this.$refs.multipleTable.selection.push(item);
}
}
} else { // 不选中
if (item.children && item.children.length > 0) {
this.$refs.multipleTable.toggleRowSelection(item, false);
this.deptSelectItem(item.children, b);
} else {
this.$refs.multipleTable.toggleRowSelection(item, false);
}
}
});
},
selectDeptCheck(val, row) { // 自定义select方法
if (val.findIndex(item => item.id === row.id) === -1) {
// 父节点取消选择
this.deptSelectItem([row], false);
} else {
// 选择父节点
this.deptSelectItem([row], true);
}
}
data数据:
[
{
"id": "1",
"title": "开发部",
"text": "开发部",
"order": 1,
"children": [
{
"id": "2",
"title": "开发一部1",
"text": "开发一部1",
"order": 1,
"children": [
{
"id": "7",
"title": "dsad",
"text": "dsad",
"parentId": "2",
"hasParent": true,
"hasChildren": false,
}
],
"parentId": "1",
"hasParent": true,
"hasChildren": true,
},
{
"id": "3",
"title": "开发二部",
"text": "开发二部",
"order": 2,
"parentId": "1",
"hasParent": true,
"hasChildren": false,
}
],
"parentId": "0",
"hasParent": true,
"hasChildren": true,
},
{
"id": "4",
"title": "市场部",
"text": "市场部",
"order": 2,
"parentId": "0",
"hasParent": false,
"hasChildren": false
},
{
"id": "5",
"title": "人事部",
"text": "人事部",
"order": 3,
"parentId": "0",
"hasParent": false,
"hasChildren": false,
},
{
"id": "6",
"title": "测试部",
"text": "测试部",
"order": 4,
"parentId": "0",
"hasParent": false,
"hasChildren": false,
}
]
还有一个很重重重要的事情:
因为我修改了源码,所以要替换lib文件
node_modules -> element-ui ->lib
修改后的源码文件:这里
如果你想自己动手,可以自己修改一下:传送门
修改的地方:
1.table -> src -> store -> watcher
_toggleAllSelection() {
const states = this.states;
const { data = [], selection } = states;
// when only some rows are selected (but not all), select or deselect all of them
// depending on the value of selectOnIndeterminate
const value = states.selectOnIndeterminate ? !states.isAllSelected : !(states.isAllSelected || selection.length);
states.isAllSelected = value;
if (states.treeCheckBox) { // 这里
let selectionChanged = false;
data.forEach((row, index) => {
if (states.selectable) {
if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
selectionChanged = true;
}
} else {
if (toggleRowStatus(selection, row, value)) {
selectionChanged = true;
}
}
});
if (selectionChanged) {
this.table.$emit('selection-change', selection ? selection.slice() : []);
}
}
this.table.$emit('select-all', selection);
},
在props里面添加:
treeCheckBox: {
type: Boolean,
default: true
}
在data()里面添加 treeCheckBox: this.treeCheckBox:
data() {
const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
this.store = createStore(this, {
rowKey: this.rowKey,
defaultExpandAll: this.defaultExpandAll,
selectOnIndeterminate: this.selectOnIndeterminate,
// TreeTable 的相关配置
indent: this.indent,
lazy: this.lazy,
lazyColumnIdentifier: hasChildren,
childrenColumnName: children,
treeCheckBox: this.treeCheckBox // 添加这个
});
废话:
唉,刚好今年毕业还遇上今年疫情,身为一个破应届生是真的难啊!
如果你有什么更好的方法,请不吝啬在评论中指教。
加油,加油,加油!!!