
<template>
<el-table
ref="table"
:data="tmpData"
style="width: 100%"
row-key="date"
border
:indent="50"
@select="handleSelect"
@select-all="handleSelectAll"
:tree-props="{children: 'children'}">
<el-table-column
reserve-selection
type="selection"
width="55">
</el-table-column>
<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>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageConfig.page"
:page-sizes="[10, 15, 20, 30, 50]"
:page-size="pageConfig.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
<el-button @click="submit">提交</el-button>
</template>
<script>
export default {
data() {
return {
tableData: [],
pageConfig: {
page: 1,
limit: 10
},
selectedLists: [],
}
},
computed: {
// 前端实现分页
tmpData() {
let index = (this.pageConfig.page - 1) * this.pageConfig.limit;
let newArr = this.tableData.slice(index, (this.pageConfig.page * this.pageConfig.limit))
// console.log(index, this.pageConfig.page * this.pageConfig.limit)
return newArr
},
},
methods: {
handleCurrentChange(val) {
this.pageConfig.page = val
},
handleSizeChange(val) {
this.pageConfig.limit = val
},
// 处理单选
handleSelect(selection, row) {
if (!row.children) {
// 得到父数据
// 如果子节点有父节点id 这里的获取方式根据实际更改
// let parentData = this.tmpData.find(item => item.fid === row.pfid)
let parentData = this.tmpData.reduce((p, c) => {
if (c.children && c.children.some(item => item.id === row.id)) {
p = c
}
return p
}, {})
// 判断parentData里的子节点 是否都存在selection中
let bool = parentData.children.every(item => selection.some(s => s.id === item.id))
// 父级是否选中
this.$refs.table.toggleRowSelection(parentData, bool)
} else {
// 根据bool让父节点是否选中
let isSelected = this.$refs.table.store.states.selection.some(item => row.id === item.id)
this.changeSelectStatus([row], isSelected)
}
this.$nextTick(() => {
this.selectedList = this.$refs.table.store.states.selection
})
},
// 表格全选
handleSelectAll(val) {
// this.changeSelectStatus(this.tmpData, this.$refs.table.store.states.isAllSelected)
this.changeSelectStatus(this.tableData, this.$refs.table.store.states.isAllSelected)
},
changeSelectStatus(data, selected) {
data.forEach(row => {
this.$refs.table.toggleRowSelection(row, selected)
if (row.children) {
this.changeSelectStatus(row.children, selected)
}
})
},
submit() {
console.log(this.$refs.table.store.states.selection)
}
},
created() {
// 添加模拟数据
for (let i = 0; i < 30; i++) {
this.tableData.push({
id: i + 1 + 'id',
date: i + 1 + 'date',
name: i + 1 + 'name',
address: i + 1 + 'address',
children: []
})
}
this.tableData[0].children = [{
id: Math.random() + 'id',
date: '2016-05-0122',
name: '王小虎1',
address: '上海市普陀区金沙江路 1519 弄',
}, {
id: Math.random() + 'id',
date: '2016-05-01333',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
}
</script>