html全选表格数据,table中如何优雅地做分页选中数据并存储

以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

从表格中选中你需要的数据，应用场景：选人、选商品等等，我将讲解遇到分页或者条件查询时，如何处理，点击在线运行或者在线运行，效果如图

image.png

image.png

巧妙应用对象进行存储选中数据，机智使用计数思维做出半选中效果

html代码如下：

table支持分页存储选中数据

v-model="param.keyWord"

placeholder="请输入名称"

style="width: 200px"

@keyup.enter.native="handleSearch"

>

查询

设置选中的数据

获取选中的数据

background

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pagination.pageNo"

:page-sizes="[10, 20, 30, 40]"

:page-size="pagination.pageSize"

layout="total, sizes,prev, pager, next, jumper"

:total="pagination.total"

>

js代码如下：

export default {

data() {

return {

param: {

keyWord: ""

},

pagination: {

pageNo: 1,

pageSize: 10,

total: 15

},

tableData: [],

//全选状态

selectAll: false,

//半选状态

isIndeterminate: false,

// 选中数据

multipleSelection: {}

};

},

mounted() {

this.getList();

},

methods: {

//切换每页显示数目

handleSizeChange(val) {

this.pagination.pageSize = val;

this.getList();

},

// 切页

handleCurrentChange(val) {

this.pagination.pageNo = val;

this.getList();

},

// 查询

handleSearch() {

this.pagination.pageNo = 1;

this.getList();

},

// 请求数据，此处用静态数据模拟，正式生产替换为网络请求数据即可

getList() {

let list = [];

if (this.pagination.pageNo == 1) { //模拟第一页数据

for (let i = 1; i <= 10; i++) {

let item = {

id: i,

name: `名称${i}`,

count: `数量${i}`

};

list.push(item);

}

}

if (this.pagination.pageNo == 2) { //模拟第二页数据

for (let i = 11; i <= 20; i++) {

let item = {

id: i,

name: `名称${i}`,

count: `数量${i}`

};

list.push(item);

}

}

list.forEach(item => {

let key = item.id;

if (this.multipleSelection[key]) {

item.select = true;

} else {

item.select = false;

}

});

this.tableData = list;

this.checkedIndeterminate();

},

// 全选

changeAll() {

this.isIndeterminate = false;

if (this.selectAll) {

this.tableData.forEach(item => {

item.select = true;

let key = item.id;

this.multipleSelection[key] = item;

});

} else {

this.tableData.forEach(item => {

item.select = false;

let key = item.id;

delete this.multipleSelection[key];

});

}

},

// 单条选

changeSelect(item) {

let key = item.id;

if (item.select) {

this.multipleSelection[key] = item;

} else {

delete this.multipleSelection[key];

}

this.checkedIndeterminate();

},

// 检查半选状态

checkedIndeterminate() {

let value = 0;

this.tableData.forEach(item => {

let key = item.id;

if (this.multipleSelection[key]) {

value++;

}

});

if (value == 0) {

//全部是未选状态

this.isIndeterminate = false;

this.selectAll = false;

} else if (value == this.tableData.length) {

//全部是选中状态

this.isIndeterminate = false;

this.selectAll = true;

} else {

//半选中状态

this.isIndeterminate = true;

this.selectAll = false;

}

},

// 设置选中的数据

setSelect(val) {

this.multipleSelection = {};

val.forEach(item => {

let key = item.id;

this.multipleSelection[key] = item;

});

this.param.keyWord = "";

this.pagination.pageNo = 1;

this.getList();

},

// 获取选中的数据

handleSelect() {

let arr = Object.values(this.multipleSelection);

console.log(arr);

}

}

};