<el-table :row-key="getRowKey" @select-all="handleSelectionAllChange" @select="handleSelectionChange"
:data="tableData" style="width: 100%" height="300px">
Element-ui官方解释
row-key:行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id
,但不支持 user.info[0].id
,此种情况请使用 Functio
select-all:当用户手动勾选全选 Checkbox 时触发的事件
select:当用户手动勾选数据行的 Checkbox 时触发的事件
代码实例:
<template>
<div>
<el-table :row-key="getRowKey" @select-all="handleSelectionAllChange" @select="handleSelectionChange"
:data="tableData" style="width: 100%" height="300px">
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>
<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>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[30, 100, 200, 300, 400]"
layout="total, prev, pager, next" :total="tableDataAll.length">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
tableDataAll: [],
currentPage: 1,
pageSize: 30,
selectedList: [], //勾选的数据
}
},
created() {
for (let index = 0; index < 300; index++) {
this.tableDataAll.push({
Id: index,
date: index,
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
})
}
this.getPage()
},
methods: {
handleSizeChange(val) {
this.pageSize = val
this.getPage()
},
handleCurrentChange(val) {
this.currentPage = val
this.getPage()
},
getPage() {
let nowIndex = this.pageSize * (this.currentPage - 1);
let size = nowIndex + this.pageSize
this.tableData = this.tableDataAll.slice(nowIndex, size)
},
//全现多框的切换
handleSelectionAllChange(val) {
let arrAll = JSON.parse(JSON.stringify(val));
this.selectedList = arrAll;
},
// 批量操作的id
getRowKey(row) {
return row.Id;
},
//现多框的切换
handleSelectionChange(val, row) {
let arrAll = JSON.parse(JSON.stringify(val));
if (this.selectedList.filter((item) => item.Id == row.Id).length == 0) {
this.selectedList = arrAll;
} else {
this.selectedList = arrAll.filter((item) => item.Id !== row.Id);
}
},
}
}
</script>