目前iview的Table组件只支持当前页的全选,跳转到下一页的时候,之前勾选的数据是没有被保存的,只能进行下一步操作。
但是当遇到数据较多,只能一页一页的操作,交互就比较麻烦。跨页全选这个功能非常有必要。
<Table :columns="columns" :data="data1"></Table>
data里面设置一个初始的数组selectList 专门用来存勾选项
columns: [
{
width: 60,
align: "center",
renderHeader: (h, params) => {
return h("div", [
h("span", {
on: {
"click": () => {
this.selectAll();
}
}
},'全选')
]);
},
render: (h, params) => {
return h("div", [
h(
"checkbox",
{
props: {
value: params.row.isSelect
},
on: {
"on-change": () => {
this.selectT(params.row);
}
}
},
""
)
]);
}
},
{
title: "Name",
key: "active_name",
align: "center"
},
{
align: "center",
title: "Time",
key: "end_time"
}
],
请求接口,展示表格的数据
if (code == "100") {
//处理接口返回的数据
let temArr = result.list.reduce((finalList, val) => {
let tempObj = {};
tempObj.isSelect = false;//是否选中
//table需要展示的数据
tempObj.active_name = val.active_name;
tempObj.end_time = val.end_time;
tempObj.id = val.id;//是否勾中的唯一标识
if (this.selectList.length > 0) {
for (let v of this.selectList) {
if (v.id == val.id) {
tempObj.isSelect = true;
}
}
}
finalList.push(tempObj);
return finalList;
}, []);
this.data1 = temArr;
this.total = result.total_count;
} else {
this.$message({
message: `${code}, ${message}`,
type: "warning"
});
}
勾选事件,选中取消selectList都会变化
selectT(e) {
e.isSelect = !e.isSelect;
if (e.isSelect == true) {
this.selectList.push(e);
} else {
this.selectList.map((v, i) => {
if (v.id == e.id) {
this.selectList.splice(i, 1);
}
});
}
console.log(this.selectList);
},
全选事件,跨页有效
selectAll() {
let flag = this.data1.every(item => {
return item.isSelect;
});
this.data1.map((v, i) => {
let obj = this.data1[i];
if (flag) {
obj.isSelect = !obj.isSelect;
} else {
obj.isSelect = true;
}
this.$set(this.data1, i, obj);
if (obj.isSelect == true) {
this.selectList.push(v);
} else {
this.selectList.map((v1, i1) => {
if (v1.id == obj.id) {
this.selectList.splice(i1, 1);
}
});
}
});
let object = {};
this.selectList = this.selectList.reduce((item, next) => {
object[next.id] ? "" : (object[next.id] = true && item.push(next));
return item;
}, []);
console.log(this.selectList)
},
文中多次使用到Array.reduce的方法,不太理解的建议先百度学习一波。
网友评论