无限叠加
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="active" label="操作">
<template slot-scope="scope">
<el-button @click="handleAddBrother(scope.$index, scope.row)">add brother</el-button>
<el-button type="danger" @click="handleAddChildren(scope.$index, scope.row)">add children</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data (){
return {
tableData: [{
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 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 321,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 3211,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}]
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
},
methods: {
getItem(){
return {
id: Date.now(),
date: '2016-05-02',
name: '王小虎 - item',
address: '上海市普陀区金沙江路 1518 弄'
}
},
loopAdd(id,list,type){
//循环函数
const index = list.findIndex(d=>d.id === id);
if(index > -1){
switch (type){
case 'addBrother':
list.push(this.getItem())
break;
case 'addChildren':
if(!list[index]['children']){
list[index]['children'] = [];
}
list[index]['children'].push(this.getItem());
break;
default:
console.log('off')
}
list = list.sort();
}else{
list.forEach(item=>{
item.children && this.loopAdd(id,item.children,type);
})
}
},
updateTableData(){
const tableData = JSON.parse(JSON.stringify(this.tableData));
this.tableData = [];
this.tableData = tableData;
},
handleAddBrother(index, row){
this.loopAdd(row.id,this.tableData,'addBrother');
this.updateTableData();
},
handleAddChildren(index, row){
this.loopAdd(row.id,this.tableData,'addChildren');
this.updateTableData();
}
}
})
</script>
</html>
狠狠点击这里，在线调试DEMO < = |
