// 表格单选事件
selectRole(selection, row) {
// 因为翻页点选后 selection 会呈现为 undefined 的元素，须要进行是否存在判断
if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
// 选中新增一行
this.addRows([row]);
} else {
// 勾销删除一行
this.removeRows([row]);
}
},
// 表格全选事件
selectRoleAll(selection) {
// 如果有则是全选否则就是全勾销
if (selection.length > 0) {this.addRows(this.tableList);
} else {this.removeRows(this.tableList);
}
},
// 增加选中行
addRows(rows) {for (const item of rows) {
// 如果选中的数据中没有这条就增加进去
if (!this.selectedRow.find(i => i.id === item.id)) {this.selectedRow.push(item);
}
}
},
// 勾销选中行
removeRows(rows) {if (this.selectedRow && this.selectedRow.length) {for (const item of rows) {this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
}
}
},
// 前端实现分页 以及翻页记忆勾选
setPagination(no, size, data) {
// this.tableList = data;
this.toggleSelection(this.selectedRow);
},
// 选中 table 已有数据
toggleSelection(rows) {if (rows && rows.length) {
rows.forEach(row => {this.$nextTick(() => {const checked = this.tableList.find(tableRow => tableRow.id === row.id);
this.$refs.roleData.toggleRowSelection(checked);
});
});
} else {if (this.$refs.roleData !== undefined) {this.$refs.roleData.clearSelection();
}
}
},
<template>
<div>
<div class="">
<el-table
border
highlight-current-row
:height="500"
resizable
:data="tableList"
ref="roleData"
:row-style="selectedHighlight"
@select="selectRole"
@select-all="selectRoleAll"
>
<el-table-column type="selection" width="40"></el-table-column>
<el-table-column label="序号" type="index" width="60"></el-table-column>
<el-table-column
v-for="(item, index) in tableLabelStaff"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
:show-overflow-tooltip="item.showOverTooltip"
>
<template slot-scope="scope">
<span>{{scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="rolepageIndex"
:page-sizes="[5, 10, 15, 20]"
:page-size="rolepageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="rolepageCount"
></el-pagination>
</div>
</template>
<script>
export default {data() {
return {
// 分页
rolepageIndex: 1,
rolepageSize: 5,
rolepageCount: 0,
// 记忆分页的时 table 选中状态
tableList: [],
// 记忆曾经选中的
selectedRow: [],
// 表头的数据
tableLabelStaff: [{ label: '日期', width: '133', prop: 'date', showOverTooltip: true, sortable: false},
{label: '姓名', width: '90', prop: 'name', showOverTooltip: true, sortable: false},
{label: '地址', width: '90', prop: 'address', showOverTooltip: true, sortable: false}
]
};
},
computed: {
// 相当于后端接口返回的数据
tableData() {let list = [];
for (let i = 0; i < 100; i++) {list[i] = {};
list[i]['date'] = '2016-05-02' + i;
list[i]['name'] = '王小虎' + i;
list[i]['address'] = ` 上海市普陀区金沙江路 ${i} 号 `;
list[i]['id'] = i;
}
return list;
}
},
mounted() {
// 获取第一页的接口
this.currentChangePage(this.tableData, this.rolepageIndex);
this.roleData = this.tableData;
this.rolepageCount = this.tableData.length;
this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
},
methods: {handleSizeChange: function(pageSize) {
// 每页条数切换
this.rolepageSize = pageSize;
this.handleCurrentChange(this.rolepageIndex);
},
handleCurrentChange: function(currentPage) {
// 页码切换
this.rolepageIndex = currentPage;
this.currentChangePage(this.tableData, currentPage);
},
// 分页办法（重点）currentChangePage(list, currentPage) {let from = (currentPage - 1) * this.rolepageSize;
let to = currentPage * this.rolepageSize;
this.tableList = [];
for (; from < to; from++) {if (list[from]) {this.tableList.push(list[from]);
}
}
this.setPagination(this.rolepageIndex, this.rolepageSize, this.roleData);
},
// 表格单选事件
selectRole(selection, row) {
// 因为翻页点选后 selection 会呈现为 undefined 的元素，须要进行是否存在判断
if (selection && selection.find(item => item && item.permissionId === row.permissionId)) {
// 选中新增一行
this.addRows([row]);
} else {
// 勾销删除一行
this.removeRows([row]);
}
},
// 表格全选事件
selectRoleAll(selection) {
// 如果有则是全选否则就是全勾销
if (selection.length > 0) {this.addRows(this.tableList);
} else {this.removeRows(this.tableList);
}
},
// 增加选中行
addRows(rows) {for (const item of rows) {
// 如果选中的数据中没有这条就增加进去
if (!this.selectedRow.find(i => i.id === item.id)) {this.selectedRow.push(item);
}
}
},
// 勾销选中行
removeRows(rows) {if (this.selectedRow && this.selectedRow.length) {for (const item of rows) {this.selectedRow = this.selectedRow.filter(i => i.id !== item.id);
}
}
},
// 前端实现分页 以及翻页记忆勾选
setPagination(no, size, data) {
// this.tableList = data;
this.toggleSelection(this.selectedRow);
},
// 选中 table 已有数据
toggleSelection(rows) {if (rows && rows.length) {
rows.forEach(row => {this.$nextTick(() => {const checked = this.tableList.find(tableRow => tableRow.id === row.id);
this.$refs.roleData.toggleRowSelection(checked);
});
});
} else {if (this.$refs.roleData !== undefined) {this.$refs.roleData.clearSelection();
}
}
},
}
};
</script>
<style lang="scss"></style>