vue+element-ui树形表多选,支持多层级联动
添加@select=“rowSelect” @select-all=“selectAll”<el-table:data="tableData"ref="tableRef"style="width: 100%;margin-bottom: 20px;"row-key="id"borderdefault-expand-allselect-on-indeterminate.
·
添加@select=“rowSelect” @select-all=“selectAll”
<el-table
:data="tableData"
ref="tableRef"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
select-on-indeterminate
@select="rowSelect"
@select-all="selectAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
<el-table-column prop="distribution" label="订餐点" width="180" align="center"></el-table-column>
<el-table-column prop="level" label="层级" align="center" width="120"> </el-table-column>
<el-table-column prop="user" label="关联用户" align="center" width="160"> </el-table-column>
<el-table-column prop="address" label="地址说明" align="center"> </el-table-column>
<el-table-column prop="date" label="创建时间" align="center" width="200"> </el-table-column>
<el-table-column fixed="right" label="操作" align="center">
<template>
<el-button type="text" size="small" @click="openCodeDialog">查看二维码</el-button>
<el-button type="text" size="small" @click="to_modify_distribution">编辑</el-button>
<el-button type="text" size="small" @click="openAddNextDialog">新增下级</el-button>
<el-button type="text" size="small" class="delete-txt-btn" >删除</el-button>
</template>
</el-table-column>
</el-table>
1.遍历数据加上select字段,判断是否被选中
2.点击每一个节点数据的时候,去判断是否有子节点,有的话操作子节点(全选or全取消)
3.然后判断是否有父节点,如果有,拿到父节点,再去对父节点进行操作
我定义的规则(可根据需求重新自定义):
当所有节点都被选中,父节点打勾,兄弟节点只要有一个节点没打勾,父节点要取消打勾
import Vue from 'vue'
export default {
data() {
return {
tableData: [{
id: 1,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
}, {
id: 2,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
children: [{
id: 21,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
}, {
id: 22,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
children: [{
id: 221,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
}, {
id: 222,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
children: [{
id: 2221,
distribution: "一楼",
level: "1",
user: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
date: '2016-05-02',
}]
}]
}]
},
selectFlag: false,
}
},
methods: {
toggleSelection(rows, flag) {
if (rows) {
rows.forEach(row => {
this.$refs.tableRef.toggleRowSelection(row, flag);
if(row.children){
this.toggleSelection(row.children, flag);
}
});
}
},
rowSelect(selection,row){
// 全选 or 取消全选
if(selection.indexOf(row)>-1){
this.toggleSelection(row.children, true);
row.select=true
if(row.children){
this.addSelect(row.children,true)
}
}else if(selection.indexOf(row)==-1){
this.toggleSelection(row.children, false);
row.select=false
if(row.children){
this.addSelect(row.children,false)
}
}
this.getParent(this.tableData,row)
},
// 获取父节点并操作
// 当所有子节点取消选中,父节点也要取消选中;当所有子节点已选中,父节点也要相应选中
getParent(data,row){
data.forEach((item) => {
//判断该行是否有子节点
if (item.children) {
//遍历子节点
item.children.forEach((item2) => {
//判断该节点是否为我点击的节点
if (item2.id == row.id) {
// 去遍历被点击节点的父节点
if(item.children){
let rowParentFlag = true;
item.children.forEach((i) => {
rowParentFlag=i.select && rowParentFlag
})
// 当所有节点都被选中,父节点打勾
if(rowParentFlag){
this.$refs.tableRef.toggleRowSelection(item, true);
item.select=true
// 获取父节点的父节点进行判断
this.getParent(this.tableData,item)
}else{
// 兄弟节点只要有一个节点没打勾,父节点都要取消打勾
this.$refs.tableRef.toggleRowSelection(item, false);
item.select=false
// 获取父节点的父节点进行判断
this.getParent(this.tableData,item)
}
}
}else if(item.children){
this.getParent(item.children,row)
}
});
}
});
},
selectAll(selection){
if(!this.selectFlag){
this.toggleSelection(selection, true);
this.addSelect(this.tableData,true)
}else{
this.$refs.tableRef.clearSelection();
this.addSelect(this.tableData,false)
}
this.selectFlag=!this.selectFlag
},
// 树形表多选,添加select字段区分当前行是否被选中
// 为了:当所有子节点取消选中,父节点也要取消选中;当所有子节点已选中,父节点也要相应选中
// element文档貌似没相关操作
addSelect(data,flag){
data.forEach((item,index)=>{
Vue.set(item,'select',flag);
if(data[index].children){
this.addSelect(data[index].children,flag)
}
})
}
},
created(){
this.addSelect(this.tableData,false)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)