这里写的是表格树一开始就返回全部的数据
<template>
<div>
<el-table @header-click="headerClick" @select-all="selectAll" lazy @row-click="rowClick" @select="handleSelectionChange" ref="treeTable" :data="tableData" style="width: 100%" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="date" label="别名/皮肤"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData:[],
rows:{}
}
},
created(){
this.getTableList()
},
methods:{
//获取数据
getTableList(){
let data=[
{id: 1,date: '打工仔',name: '中路',state:0,
children: [
{id: 11,date: '仲夏夜之梦',name: '貂蝉',state:0,},
{id: 12,date: '凤凰于飞',name: '王昭君',state:0,},
{id: 13,date: '女仆咖啡',name: '妲己',state:0,},
{id: 14,date: '缤纷独角兽',name: '小乔',state:0,},
{id: 15,date: '幻海之心',name: '武则天',state:0,},
{id: 16,date: '魅语',name: '不知火舞',}
]
},
{id: 2,date: '孤儿',name: '对抗路',
children:[
{id: 21,date: '秩序猎龙将',name: '蒙恬',},
{id: 22,date: '胖达荣荣',name: '梦琪',},
{id: 23,date: '年年有余',name: '猪八戒',},
{id: 24,date: '一念神魔',name: '李信',},
{id: 25,date: '猫狗日记',name: '孙策',},
{id: 26,date: '特工战影',name: '狂铁',}
]
},
{id: 3,date: '弟弟',name: '发育路',
children: [
{id: 31,date: '太华',name: '伽罗'},
{id: 32,date: '特工魅影',name: '百里守约'},
{id: 33,date: '黄金射手座',name: '后羿'},
{id: 34,date: '裂魂',name: '黄忠'},
{id: 35,date: '逐梦之星',name: '马克波罗'},
{id: 36,date: '云霓雀翎',name: '虞姬'},
]
},
{id: 4,date: '蹭线王',name: '打野',
children:[
{id: 41,date: '汉昭烈帝',name: '刘备'},
{id: 42,date: '云鹰飞将',name: '曜'},
{id: 43,date: '纤云弄巧',name: '云中君'},
{id: 44,date: '白虎志',name: '百里玄策'},
{id: 45,date: '全息碎影',name: '孙悟空'},
{id: 46,date: '晚萤',name: '娜可露露'},
]
},
{id: 5,date: '背锅侠',name: '辅助',
children:[
{id: 51,date: '逐梦之光',name: '东皇太一'},
{id: 52,date: '遇见神鹿',name: '瑶'},
{id: 53,date: '阿摩斯公爵',name: '鬼谷子'},
{id: 54,date: '御銮',name: '盾山'},
{id: 55,date: '虹云星官',name: '明世隐'},
{id: 56,date: '天使之翼',name: '孙膑'},
]},
]
this.tableData=data
this.defaultSelect(data)
},
getNum(data){
let num=0
data.forEach(item=>{
if(item.hasChildren==true){
num+=1
}
})
return num
},
//点击全选复选框
selectAll(){
let data=this.$refs.treeTable.data
let num=this.getNum(data)
data.forEach(item=>{
if(num>=0 && num<data.length){
item.hasChildren=false
}else{
item.hasChildren=true
}
this.rowClick(item)
})
},
//点击表格头部
headerClick(){
let data=this.$refs.treeTable.data
let num=this.getNum(data)
data.forEach(item=>{
if(num>=0 && num<data.length){
item.hasChildren=false
}else{
item.hasChildren=true
}
this.rowClick(item)
})
},
//点击列表
rowClick(row){
this.rows = this.$refs.treeTable.selection;
let checkrow = [];
checkrow.push(row);
if (row.hasChildren == true) {
this.clearRow(checkrow);
} else {
this.checkRow(checkrow);
}
},
//点击复选框事件
handleSelectionChange (select, row) {
this.rows = this.$refs.treeTable.selection;
let checkrow = [];
checkrow.push(row);
if (row.hasChildren == true) {
if (select == 1) {
this.$refs.treeTable.toggleRowSelection(row,false);
}
this.clearRow(checkrow);
} else {
if (select == 1) {
this.$refs.treeTable.toggleRowSelection(row, true);
}
this.checkRow(checkrow);
}
},
//取消选中递归
clearRow (data) {
Array.from(data).forEach(row => {
row.hasChildren = false;
this.$refs.treeTable.toggleRowSelection(row, false);
if (row.children) this.clearRow(row.children);
})
},
//选中递归
checkRow (data) {
Array.from(data).forEach(row => {
row.hasChildren = true;//选中是字段值为true
this.$refs.treeTable.toggleRowSelection(row, true);
if (row.children) this.checkRow(row.children);
})
},
//默认选中
defaultSelect(data){
if(data.length>0){
this.$nextTick(()=>{
data.forEach(item=>{
if(item.state==0){
this.$refs.treeTable.toggleRowSelection(item, true);
if (item.children) this.defaultSelect(item.children);
}
})
})
}
}
}
}
</script>