tree-table
1、将原数据添加isCheck(是否被选择)的属性,默认isCheck为false(未选择)
2、handleSelection事件是当用户手动勾选数据行的 Checkbox 时触发的事件;根据参数row来区分父选择项与子选择项;
如果是父选择项则只用考虑当被选择时子选项是否全选。
如果是子选择项则考虑,当子选择项被选择前,父选择项是否已被选择;当子选项全被取消时父选择项也默认取消选择
3、handleSeletionAll事件是全选事件,设置checkAll来判断是否全选
<el-table
ref="rightTable"
:data="rightCheckList"
stripe
style="width:100%"
height="260"
max-height="380"
:row-style="{height:'10px'}"
:cell-style="{padding:'5px 0'}"
row-key="id"
:default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@select="handleSelection"
@selection-change="handleSelectionChange"
@select-all="handleSeletionAll"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称" width="150"></el-table-column>
</el-table>
data() {
return {
checkAll: false, //是否全选
addformLabelWidth: "50px",
tableData2: [
{
id: 1,
name: "menu1",
parent: 0
},
{
id: 2,
name: "menu2",
parent: 0
},
{
id: 3,
remarks: "一级菜单",
name: "menu3",
parent: 0,
children: [
{
id: 31,
name: "menu31",
parent: 3
},
{
id: 32,
name: "menu32",
parent: 3
}
]
} ],
rightCheckList: [],//绑定tree-table数据
rightobj: {}//数据对象
};
},
methods:{
//初始化选择项
initCheckedBox() {
let initList = function(data) {
data.forEach(function(item) { //created使用箭头函数报错,所以用function(){}
item.isCheck = false; //未选中
if (item.children) {
initList(item.children);
}
});
return data;
};
this.rightCheckList = initList(this.tableData2);
console.log(this.rightCheckList);
},
//当用户手动勾选全选 Checkbox 时触发的事件
handleSeletionAll(selection) {
if (!this.checkAll) {
console.log("全选");
this.checkAll = true;
this.isAllChecked(this.rightCheckList, true);
} else {
console.log("全取消");
this.checkAll = false;
this.isAllChecked(this.rightCheckList, false);
}
},
//当用户手动勾选数据行的 Checkbox 时触发的事件
handleSelection(selection, row) {
let selectionlist = selection;
//转化成{'1':{...}}的形式
this.getRightListObj(this.rightCheckList);
//获取当前选中的row
let checkrow = [];
checkrow.push(row);
let goalid = checkrow[0];
//父节点
if (goalid.parent === 0) {
console.log(goalid.isCheck);
if (goalid.isCheck) {
//父节点全选中
this.isRowsChecked(goalid, false); //取消
} else {
this.isRowsChecked(goalid, true);
}
}
//子节点
if (goalid.parent !== 0) {
if (goalid.isCheck) {
this.clearParentRow(goalid, this.rightCheckList, this.rightobj);
} else {
this.checkedParentRow(goalid, this.rightCheckList, this.rightobj);
}
}
},
//是否全选中
//是否全选中
isAllChecked(data, status) {
//data(array) status =true or false
if (data.length === undefined) {
let imitData = [];
imitData.push(data);
this.isAllChecked(imitData, status);
} else {
data.forEach(item => {
item.isCheck = status;
this.$refs.rightTable.toggleRowSelection(item, status);
if (item.children) {
this.isAllChecked(item.children, status);
}
});
}
},
//选中子节点默认选中父节点
checkedParentRow(data, list, obj) {
data.isCheck = true;
let parent = data.parent; //父节点
obj[data.parent].isCheck = true;
this.$refs.rightTable.toggleRowSelection(list[parent - 1], true);
},
//子节点都未被选中,父节点默认取消选中
clearParentRow(data, list, obj) {
let falselist = [];
let parent = data.parent; //父节点
// let parentIsCheck = obj[data.parent].isCheck; //父节点选中状态
data.isCheck = false;
this.$refs.rightTable.toggleRowSelection(data, false);
//检测所有子节点的选中状态
obj[parent].children.forEach(item => {
let status = obj[item.id].isCheck;
if (!status) {
falselist.push(status);
}
});
//当所有子节点未被选中
if (falselist.length === obj[parent].children.length) {
obj[data.parent].isCheck = false;
this.$refs.rightTable.toggleRowSelection(list[parent - 1], false);
}
},
getRightListObj(data) {
data.forEach(item => {
this.rightobj[item.id] = item;
if (item.children) {
this.getRightListObj(item.children);
}
});
}
}