// html
<el-table
v-adaptive="{bottomOffset: 80}"
height="100px"
:data="tableData"
row-key="id"
:tree-props="{children: 'childList'}"
ref="multipleTable"
@select-all="selectAll"
@selection-change="handleSelectionChange"
stripe
size="small"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="80" />
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
data() {
return {
checkedKeys: false,
tableData: [{
id: 1,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
childList: [{
id: 31,
date: '2016-05-31',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-32',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 4,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
treeProps: { children: 'children', hasChildren: 'hasChildren' }, // 树状图的配置项
total: 0,
pageSize: 10
}
},
// methods
selectAll() {
this.checkedKeys = !this.checkedKeys;
this.changeSelectStatus(this.tableData, this.checkedKeys);
},
changeSelectStatus(data, selected) {
data.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, selected)
if (row.childList) {
this.changeSelectStatus(row.childList, selected)
}
})
},
handleSelectionChange(val) {
console.log(val)
},
网友评论