element的table表格多选结合分页实现已选中的记忆功能和实现表格数据和已选数据动态同步更新
1.先上效果图：
1-1.一开始无数据（相当于新增）：
1-2：一开始有数据（相当于编辑）：
2.主要实现逻辑：
借助element组件的table表格的selection-change方法（ps：element组件的table表格）结合分页组件，自行定义一个用于存储当前页的已勾选数据，一个用于存储所勾选的所有数据（也就是右侧展示已勾选数据），及一个标志位来实现。
3.具体代码实现：
3-1：HTML结构：
A:图示：
B：主要代码：
![]()
文章
视频
文档
系列课
3-2：JS逻辑：
A:图示：
B.主要代码实现：
import * as API from 'api/safety_learning/learn_management/train_plan';
export default {
mixins: [tableMixin, permissionsMixin],
props: {
value: {
type: Boolean,
default: false
},
selectedEditData: {
type: Array,
default () {
return []
}
}
},
data() {
return {
isShow: false, //对话框显隐
table_loading: false, //表格loading
data: null, //列表数据
multipleSelection: [], // 当前页选中的数据
idKey: "id", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
selectedData: [], //右侧已选课程的数据(也就是所勾选的所有数据)
params: {
rows: 20,
page: 1,
name: "", //课程
type: '', //类型
},
}
},
watch: {
value(bool) {
this.isShow = bool
if (bool) {
if (this.selectedEditData && this.selectedEditData.length) {
this.selectedData = this.selectedEditData;
} else {
this.selectedData = [];
}
this.curToken = '?access_token=' + getToken();
this.getMinioBucketName().then(res => {
this.index(1);
})
}
}
},
methods: {
// 设置选中的方法
setSelectRow() {
if (!this.selectedData || this.selectedData.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let selectAllIds = [];
let that = this;
this.selectedData.forEach(row => {
selectAllIds.push(row[idKey]);
});
this.$refs.table.clearSelection();
for (var i = 0; i < this.data.rows.length; i++) {
if (selectAllIds.indexOf(this.data.rows[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="table"
this.$refs.table.toggleRowSelection(this.data.rows[i], true);
}
}
},
// 记忆选择核心方法
changePageCoreRecordData() {
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
if (this.selectedData.length <= 0) {
this.selectedData = this.multipleSelection;
return;
}
// 总选择里面的key集合
let selectAllIds = [];
this.selectedData.forEach(row => {
selectAllIds.push(row[idKey]);
});
let selectIds = [];
// 获取当前页选中的id
this.multipleSelection.forEach(row => {
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.selectedData.push(row);
}
});
let noSelectIds = [];
// 得到当前页没有选中的id
this.data.rows.forEach(row => {
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey]);
}
});
noSelectIds.forEach(id => {
if (selectAllIds.indexOf(id) >= 0) {
for (let i = 0; i < that.selectedData.length; i++) {
if (that.selectedData[i][idKey] == id) {
// 如果总选择中有未被选中的，那么就删除这条
that.selectedData.splice(i, 1);
break;
}
}
}
});
},
currentChange(val) {
// 改变页的时候调用一次
this.changePageCoreRecordData();
this.params.page = val;
this.index();
},
sizeChange(val) {
// 改变每页显示条数的时候调用一次
this.changePageCoreRecordData();
this.params.rows = val;
this.index();
},
//获取桶名
getMinioBucketName() {
return new Promise((resolve, reject) => {
this.isGetTm = false;
API.getMinioBucketName().then((res) => {
if (res.code !== 10000) return;
this.isGetTm = true;
this.downloadDir = res.data + '/';
resolve(res);
}).catch((err) => {
this.isGetTm = true;
reject(err)
});
})
},
//表格多选框选中改变事件
handleSelectionChange(val) {
this.multipleSelection = val;
setTimeout(() => {
this.getRight();
}, 50)
},
//必须在此多封装一层调用changePageCoreRecordData，然后给handleSelectionChange中调用，不然有bug
getRight() {
this.changePageCoreRecordData();
},
//删除已选(右侧已选区域的点X删除事件)
delSelectedItem(id) {
let row = this.data.rows.filter(i => {
return i.id === id;
});
if (row && row.length) {
this.$refs.table.toggleRowSelection(row[0]);
}
this.selectedData = this.selectedData.filter(i => {
return i.id !== id;
});
},
index(page) {
$('#elTable .el-table__body-wrapper').scrollTop(0);
if (page) {
this.params.page = page;
}
let data = {
org: this.analyseId,
page: this.params.page,
rows: this.params.rows,
name: this.params.name,
type: this.params.type,
}
this.table_loading = true;
API.getclassesList(data).then(res => {
this.table_loading = false;
if (res.code === 10000) {
this.data = {
total: res.total,
rows: res.rows
};
setTimeout(() => {
this.setSelectRow();
}, 20);
}
}).catch(err => {
this.table_loading = false;
});
},
/**
* 重置搜索
*/
resetSearch() {
for (let k of Object.keys(this.params)) {
if (['page', 'rows'].includes(k)) {
continue;
}
this.params[k] = '';
}
this.index(1);
},
//关闭
cancel() {
this.clear();
this.$emit('cancelData');
},
//确定
ok() {
this.clear();
this.$emit('getSelectedData', this.selectedData)
},
clear() {
this.$emit('input', false);
}
},
};
4. 注意点：如果此功能效果是要在子组件中使用（本作就是基于子组件实现的），那么需要注意以下的逻辑。因为handleSelectionChange事件，会造成子组件勾选的时候，父组件的已选数据（父组件传至子组件的那个变量，在此文章中为selectedEditData）会同步变化，不管是子组件选择后点击取消还是关闭都会把更新数据带回父组件。非常诡异。所以，这里给出了一种解决方案：就是在父组件的时候先用本地缓存存储一开始的已选数据，然后根据子组件是点击关闭（取消）还是保存发射给父组件不同的事件，然后父组件根据不同事件作出不同的逻辑处理，确保selectedEditData是准确的。
4-1.主要代码实现：
A.图示：
5.还有一点需要注意的就是，关闭当前弹窗或者保存成功关闭弹窗后，要清空对应的本地缓存，不然有bug哦。
