1.实现效果
分页多选.gif
2.实现原理
-
引入iview组件库，使用iview的Table组件+Page组件。
-
在columns列加入type: "selection",设置Table的选择事件。@on-select-all，@on-select-all-cancel，@on-select，@on-select-cancel。
-
假设有禁用项，为禁用项设置_disabled为true，当进行全选或全部选时，只针对_disabled为false的数据。
-
data中设置checkedList:[],表示选择的数据的合集，这里以数据的id为例。
-
当选中其中一项的时候，先判断checkedList是否含有改数据，用includes来判断，当无数据的时候，push进checkedList，反之不进行操作。
-
当取消选中的时候，用indexOf去checkedList查找相应的索引，如果返回的索引不为-1，则用splice删除数据。
-
重点！！ 当点击上一下，下一页的时，调用获取表格数据的接口，在这个接口中调用selectedData事件，该事件处理为：当checkedList不为空，表格数据中去匹配checkedList里面的值，如果能匹配到，设置该项的_checked为true；
-
当点击刷新时，重新获取接口，并将checkedList置为空，实现数据的重筛。
-
注:includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
-
注：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
-
注：splice() 方法向/从数组添加/删除项目，并返回删除的项目，该方法会改变原始数组。
3.实现代码
页面代码
<template>
<div class="content">
<Card>
<p slot="title">分页多选数据</p>
<template slot="extra">
<Button type="primary" icon="md-sync" @click="reset()" class="mr10"
>刷新</Button
>
<Button type="primary" @click="batch">批量操作</Button>
</template>
<Table
class="table"
border
stripe
:columns="columns"
:data="tbList || []"
@on-select-all="selectAll"
@on-select-all-cancel="cancelAll"
@on-select="tableSelectRow"
@on-select-cancel="tableSelectCancelRow"
>
<template slot-scope="{ index }" slot="index">
{{ (params.page - 1) * params.pageSize + index + 1 }}
</template>
<template slot-scope="{ row }" slot="iconCover">
<Avatar shape="square" size="large" :src="row.icon_cover" />
</template>
</Table>
<div>
<Page
class="public-page"
:style="{ marginTop: '20px' }"
:total="total"
:current.sync="params.page"
:page-size-opts="[10, 20, 30, 100]"
:page-size="params.pageSize"
show-sizer
show-total
prev-text="Previous"
next-text="Next"
show-elevator
@on-change="(val) => pageNumChange(val, 'params')"
@on-page-size-change="(val) => pageSizeChange(val, 'params')"
/>
</div>
</Card>
</div>
</template>
<script>
const columns = [
{
type: "selection",
width: 60,
align: "center",
fixed: "left",
},
{
title: "序号",
slot: "index",
width: 80,
align: "center",
},
{
title: "ID",
key: "id",
align: "center",
},
{
title: "名称",
key: "name",
align: "center",
ellipsis: true,
},
{
title: "年龄",
key: "age",
align: "center",
},
{
title: "创建时间",
key: "dateTime",
align: "center",
},
{
title: "头像",
slot: "iconCover",
align: "center",
},
];
export default {
data() {
return {
columns,
params: {
page: 1,
pageSize: 10,
},
tbList: [],
total: 0,
checkedList: [],
};
},
created() {
this.getList();
},
methods: {
async getList() {
this.$loading.show();
const { code, data, total } = await this.$api.tableList(this.params);
if (code == "200") {
this.tbList = data;
this.total = total;
setTimeout(() => {
this.$loading.hide();
}, 100);
this.tbList.forEach((item, index) => {
if (index % 2 == 0) {
this.$set(this.tbList[index], "_disabled", false);
} else {
this.$set(this.tbList[index], "_disabled", true);
}
});
this.selectedData();
}
},
pageNumChange(page, type) {
if (type == "params") {
this[type].page = page;
this.getList();
}
},
pageSizeChange(pageSize, type) {
this[type].pageSize = pageSize;
if (type == "params") {
if (this[type].page == 1) {
this.getList();
} else {
this[type].page = 1;
}
}
},
reset() {
this.params.page = 1;
this.params.pageSize = 10;
this.checkedList = [];
this.getList();
},
tableSelectRow(selection, row) {
if (!this.checkedList.includes(row.id)) {
this.checkedList.push(row.id);
}
},
tableSelectCancelRow(selection, row) {
var index = this.checkedList.indexOf(row.id);
if (index != -1) {
this.checkedList.splice(index, 1);
}
},
selectAll() {
this.tbList.forEach((item) => {
if (item._disabled == false) {
this.tableSelectRow(null, item);
}
});
},
cancelAll() {
this.tbList.forEach((item) => {
if (item._disabled == false) {
this.tableSelectCancelRow(null, item);
}
});
},
selectedData() {
if (this.checkedList.length > 0) {
this.tbList.forEach((item, index) => {
if (this.checkedList.includes(item.id)) {
this.$set(this.tbList[index], "_checked", true);
}
});
}
},
batch() {
if (this.checkedList.length == 0) {
return this.$Message.error("尚未选择呢");
}
console.log(this.checkedList);
},
},
};
</script>
网友评论