实现效果
<template>
<div class="app-container order-list">
<el-table ref="orderTable"
:data="list" tooltip-effect="dark"
style="width: 100%;border-top: 1px solid #EBEEF5;" row-key="id"
:tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
:header-cell-style="{background:'#fafafa',color:'#606266'}" :indent="20"
@select="handleSelectionChange"
@select-all="selectAll"
>
<el-table-column type="selection" width="30" align="left"
:reserve-selection="true" />
<el-table-column type="index" :label="$t('table.number')" width="110" align="center" />
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
childList: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
checkedKeys: false, //是否全选
checkedId:[] ,//选中的Id
}
},
created() {
},
methods: {
// 全选
selectAll() {
this.checkedKeys = !this.checkedKeys;
this.splite(this.list, this.checkedKeys);
},
/**
* 处理数据
*/
splite(data, flag) {
// console.log(data)
data.forEach((row) => {
this.$refs.orderTable.toggleRowSelection(row, flag);
row.isSelect = flag
// console.log(row.childList)
if (row.childList !=null && row.childList != undefined && row.childList.length>0) {
this.splite(row.childList,flag);
}
});
this.checkedId = []
this.recursionComputed(this.list)
},
// 单选
handleSelectionChange(val,row){
/*
* 第一次选中的父 ,子是手动循环选中
* 子选中的数据 只会在下一次点击选中的时候 打印出选中的子和父的选中的数据
*/
console.log('当选选中数据',val);
console.log('当前点击',row);
console.log('当前点击id',row.id);
/*
找到 当前点击的 数据是否是在val中 已经选中的
如果是 当把当前点击的数据得子全部选中
*/
let findCheckId = val.find(item=>item.id==row.id)
if(findCheckId){
row.isSelect = true
if(row.childList !=null && row.childList != undefined && row.childList.length>0){
row.childList.forEach(item=>{
this.$refs.orderTable.toggleRowSelection(item, true);
item.isSelect = true
})
}
}else{
row.isSelect = false
if(row.childList !=null && row.childList != undefined && row.childList.length>0){
row.childList.forEach(item=>{
this.$refs.orderTable.toggleRowSelection(item, false);
item.isSelect = false
})
}
}
this.checkedId = []
this.recursionComputed(this.list)
},
// 递归处理列表中的选中的数据的id
recursionComputed(data){
data.forEach((row) => {
if(row.isSelect==true){
this.checkedId.push(row.id)
}
if (row.childList !=null && row.childList != undefined && row.childList.length>0) {
this.recursionComputed(row.childList);
}
});
this.checkedId = [...new Set(this.checkedId)] //这是ID去重
console.log( ' this.checkedId===',this.checkedId)
},
}
}
</script>