iview提供了table组件，可以设置多选。但是当涉及到分页时，要做很多工作
分页table
我的思路：
每次从服务器获取数据后，调用updateChecked方法
给table渲染数据加上_checked=true，会显示已选中(iview的api)
//把源数据加上_checked字段，遍历已选项数据，更新选中状态
updateChecked() {
for (var i = 0; i < this.tableData.length; i++) {
this.tableData[i]._checked = false;
for (var j = 0; j < this.selected.length; j++) {
if (this.selected[j].game_id === this.tableData[i].game_id) {
this.tableData[i]._checked = true;
}
}
}
}
监听 选中/取消
remove uniqBy differenceBy这几个方法来自loadsh，极大方便了数据处理
handleCancel(selection, row) {
//监听取消选中某一项，从已选项中删除取消项，row代表取消选择的项数据
remove(this.selected, n => {
return n.game_id === row.game_id;
});
},
handleSelect(selection, row) {
//监听选中某一项，添加到已选项
this.selected.push(row);
},
handleSelectAll(selection) {
//监听全选，有可能用户先单独选择了某几项，被我们push进去，然后再点了全选，因此数组合并需要去重一下
this.selected = uniqBy(this.selected.concat(selection), "game_id");
},
handleCancelSelectAll(selection) {
//监听取消全选，从已选项中移除当页数据
this.selected = differenceBy(this.selected, this.tableData, "game_id");
}
全部代码如下
<template>
<div>
<Modal draggable v-model="modalShow" width="560" :styles="{top: '0px'}">
<p slot="header" style>
<span>已配置游戏列表</span>
</p>
<div @click="modalAShow= true ">
<Table
@on-select-all-cancel="handleCancelSelectAll"
@on-select-all="handleSelectAll"
@on-select="handleSelect"
@on-select-cancel="handleCancel"
height="550"
border
ref="selection"
:columns="columns"
:data="tableData"
></Table>
<div style="margin-top:10px">
<Page
@on-page-size-change="pageSizeChange"
@on-change="pageChange"
:total="total"
:page-size="pageSize"
show-sizer
:page-size-opts="[5,10,15,20,30,40]"
show-elevator
/>
</div>
</div>
<div slot="footer">
<Button @click="modalASubmit()" type="primary">确定</Button>
<Button @click="modalShow=false">关闭</Button>
</div>
</Modal>
</div>
</template>
<script>
const uniqBy = require("lodash.uniqby");
const remove = require("lodash.remove");
const differenceBy = require("lodash.differenceby");
export default {
props: {
fromArr: {
type: Array,
default: function() {
return [];
}
},
value: {
type: Boolean,
default: true
}
},
data() {
return {
columns: [
{
type: "selection",
width: 60,
align: "center"
},
{
title: "game_id",
key: "game_id"
},
{
title: "游戏名称",
key: "name"
},
{
title: "标记",
key: "sign"
}
],
tableData: [],
modalShow: this.value,
page: 0,
pageSize: 10,
total: 0,
selected: [],
curPageSelected: []
};
},
created() {
this.getGameList();
},
methods: {
pageChange(page) {
this.page = page - 1;
this.getGameList();
},
pageSizeChange(pageSize) {
this.pageSize = pageSize;
this.page = 0;
this.getGameList();
},
getGameList() {
this.axios
.get(
`http://xxx:55555/v1/ranking/get_all_game/?page=${this.page}&size=${this.pageSize}`,{headers: token:
"teacher_2%7C1%3A0%7C10%3A1558061727%7C8%3Ausername%7C8%3AYWRtaW4%3D%7C59ae83951033f0861187d615765a2c2c75aeb859df9670b95c3440d737dd6b89",
uid: 31
}
}
)
.then(res => {
this.tableData = res.data;
this.total = res.total;
this.updateChecked();
});
},
handleCancel(selection, row) {
//从已选项中去除取消项
remove(this.selected, n => {
return n.game_id === row.game_id;
});
},
handleSelect(selection, row) {
//添加到已选项
this.selected.push(row);
},
handleSelectAll(selection) {
//数组合并，有可能用户先选择了某几项，已经被我们push进去，因此数组合并需要去重一下
this.selected = uniqBy(this.selected.concat(selection), "game_id");
},
handleCancelSelectAll(selection) {
//从已选项中移除当页数据
this.selected = differenceBy(this.selected, this.tableData, "game_id");
},
//把源数据加上_checked字段，遍历已选项数据，更新选中状态
updateChecked() {
for (var i = 0; i < this.tableData.length; i++) {
this.tableData[i]._checked = false;
for (var j = 0; j < this.selected.length; j++) {
if (this.selected[j].game_id === this.tableData[i].game_id) {
this.tableData[i]._checked = true;
}
}
}
},
modalASubmit() {
console.log(uniqBy(this.selected, "game_id"));
return;
this.modalShow = false;
}
}
};
</script>
总结
就是维护了一个selected数组，监听用户的选择，用来增删已选项，每次分页调取接口时更新tabledata的_checked属性
