<el-table
:data="tableData"
ref="table"
row-key="id"
default-expand-all border
@select="select"
@select-all="selectAll"
@selection-change="selectionChange">
<el-table-column width="30" align="center"></el-table-column>
<el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column prop="date" label="日期" width="150" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
<el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column>
</el-table>
data(){
tableData: [{
id: '1',
date: '2016-05-03',
name: '汪洋',
address: '上海市普陀区金沙江路 1518 弄',
children: [{
id: '1-1',
date: '2016-05-03',
name: '汪洋1',
address: '上海市普陀区金沙江路 1518 弄',
}]
}, {
id: '2',
date: '2016-05-02',
name: '陈茜',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '3',
date: '2016-05-04',
name: '李庆',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '4',
date: '2016-05-01',
name: '宋洁洁',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '5',
date: '2016-05-08',
name: '陈汉芙',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '6',
date: '2016-05-06',
name: '庞瑞楠',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '7',
date: '2016-05-07',
name: '刘兴博',
address: '上海市普陀区金沙江路 1518 弄'
}],
isAllSelection: false
}
methods: {
/**
* 当用户手动勾选 数据行的 Checkbox 时触发的事件
* @param {Object} selection
* @param {Object} row
*/
select(selection, row){},
/**
* 当用户手动勾选 全选 Checkbox 时触发的事件
* @param {Object} selection
*/
selectAll(selection){
this.isAllSelection = !this.isAllSelection;
this.toggleSelectionRecursion(this.tableData, this.isAllSelection);
},
/**
* 当选择项发生变化时会触发该事件
* @param {Object} selection
*/
selectionChange(selection){},
/**
* 递归-----表格所有节点(包括子节点)的选中与否
* @param {Object} data
* @param {Object} isAllSelection
*/
toggleSelectionRecursion(data, isAllSelection) {
data.map((item, index) => {
this.$refs.table.toggleRowSelection(item, isAllSelection);
if(item.children && item.children.length != 0){
this.toggleSelectionRecursion(item.children, isAllSelection);
}
});
}
}
网友评论