Vue+Element-ui<表格分页选中数据>
2021-08-06 本文已影响0人
誰在花里胡哨
2021-08-05 17-01-33.gif
如果你想单纯的实现类似左侧的表格勾选
(不考虑右侧的移除功能)，且翻页的时候☑️不会消失，那就简单很多了，可以直接参考下面的代码👇，你也可以试着去 element-ui Table表格 中去了解这些属性
<el-table
highlight-current-row
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange"
row-key="每条数据的唯一标示属性（id）"
>
<el-table-column
:reserve-selection="true"
:selectable="checkSelectable"
type="selection"
width="45"
></el-table-column>
<el-table-column prop="userName" label="用户名称"></el-table-column>
</el-table>
如果你的需求类似于我这边的，那么你可以继续往下看👇👇👇
需求：
1.选中左侧列表数据对应同步右侧列表数据；
2.移除右侧列表数据对应取消左侧列表数据中的选中效果；
3.实现多页面的选中；
问题：
可参考最下方代码加以理解
-
1.浅拷贝的问题
如果直接this.multipleSelection = val,那么假如你要修改右侧列表 中的用户名称时，会出现同步修改左侧列表中的名称（假如你不需要修改那么可以忽略此问题）
下面的解决方法会出现弊端，在 this.$refs.multipleTable.toggleRowSelection(tabRow) 的时候需要用遍历后的数据才能实现选中和取消
解决
let _obj = JSON.stringify(val);
let objClone = JSON.parse(_obj);
this.multipleSelection = objClone;
-
2.右侧移除的数据不在左侧列表中的问题
假如在第1页选中了数据，此时会同步到右侧，若翻到第二页，此时去移除右侧的数据时会报错，原因是在调用this.$refs.multipleTable.toggleRowSelection(tabRow)并没有在左侧列表中找到。
此时需要建立一个在当前页面临时删除的数组multipleSelectionMove，数组中记录符合此条件的数据,方便在用户再次勾选其它数据中从选项中不再同步对应的数据。
每次切换页面时需要事先滞空 multipleSelectionMove 用于记录当前页的移除数据
解决
toggleSelection(rows) {
...
if (tabRow) {
this.$refs.multipleTable.toggleRowSelection(tabRow);
} else {
// 遍历发现不存在，储存在临时删除的数组中，数组会在翻页的时候重置
this.multipleSelectionMove.push(row);
}
});
},
-
3.基于问题2移除数据后，再次选中其他数据出现的问题
在问题2中有提到过，移除非本页的数据时，会建立一个multipleSelectionMove,此时在element-ui表格中并没有移除对应的记录，所以在用户再次勾选其它数据时，之前移除的数据会再次出现
解决
handleSelectionChange(val) {
...
if (this.multipleSelectionMove.length) {
//当存在临时删除数据时，用户再次在左侧勾选，此时会对比出不需要再次同步的数据，这样就不会出现上面提到的问题
objClone.map((v, index) => {
this.multipleSelectionMove.map(mo => {
if (mo.userGuid === v.userGuid) {
objClone.splice(index, 1, null);
}
});
});
let arr = objClone.filter(f => f);
this.multipleSelection = arr;
} else {
//当不存在临时删除数据时，即不存在跨页面删除的数据，那么就直接同步勾选数据
this.multipleSelection = objClone;
}
}
-
4.移除非本页数据后，返回之前页，勾选未取消问题
移除非本页，我们无法去调用element-ui表格提供的this.$refs.multipleTable.toggleRowSelection(tabRow),所以此时在element-ui表格的记录中，你移除的选项还在。
此时需要在每次切换页面，请求数据时都会根据element-ui表格的所有选中记录和你右侧的列表数据对比，对比发现没有的，就取消选中。
解决
...
this.$nextTick(() => {
this.multipleSelectionMove = [];
let reomveArr = [];
//从所有选中的数据中去遍历查找，若未找到，则说明在右侧的数据中已经移除，那么就要重新赋值对应的选中项，使其变成未选中的状态
this.multipleSelectionAll.forEach(row => {
let findRow = this.multipleSelection.find(
item => item.userGuid === row.userGuid
);
if (!findRow) {
reomveArr.push(row);
}
});
//将未对比到的数据取消勾选
this.toggleSelection(reomveArr);
...
代码如下：
<template>
<div>
<div class="table-line">
<div>
<el-table
style="width:100%"
max-height="460"
highlight-current-row
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:header-cell-style="{background:'#f1f1f1',color:'#606266'}"
row-key="userGuid"
>
<el-table-column :reserve-selection="true" type="selection" width="45"></el-table-column>
<el-table-column label="序号" type="index" width="60" align="center">
<template
slot-scope="scope"
>{{(scope.$index + 1) + (queryModel.current-1) * queryModel.size}}</template>
</el-table-column>
<el-table-column prop="userName" label="用户名称" width="70"></el-table-column>
</el-table>
</div>
<div style="margin-left:20px">
<el-table
style="width:100%"
max-height="500"
:data="multipleSelection"
tooltip-effect="dark"
:header-cell-style="{background:'#f1f1f1',color:'#606266'}"
>
<el-table-column prop="userName" label="用户名称" width="70"></el-table-column>
<el-table-column label="操作" width="70" align="center">
<template slot-scope="scope">
<el-button type="text" @click="toRemove(scope.row.userGuid)">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-pagination
style="margin-top:20px"
@current-change="handleCurrentChange"
background
layout="pager"
:total="queryModel.totalCount"
></el-pagination>
</div>
</template>
<script>
import { getERPSalesAll } from "@/api/erp";
export default {
data() {
return {
multipleSelectionAll: [], //所有处于选择状态下的数据
tableData: [], //左侧列表数据
multipleSelection: [], //右侧选择的列表
multipleSelectionMove: [], //记录右侧临时移除的数据
//查询条件
queryModel: {
current: 1,
size: 10,
totalCount: 0,
keyword: null
}
};
},
mounted() {
this.fetchList();
},
methods: {
handleCurrentChange(val) {
this.queryModel.current = val;
this.fetchList();
},
//表格数据查询
fetchList() {
getERPSalesAll(this.queryModel).then(res => {
if (res.data) {
this.tableData = res.data.records;
if (this.queryModel.totalCount === 0) {
this.queryModel.totalCount = res.data.total;
}
/**
* 翻页时
* 1.重置临时删除数组
* 2.若用户在第1页勾选了数据，却在第2页的情况下
* 通过右侧移除去移除掉该数据，那么在 toggleSelection 方法中并不会去执行 this.$refs.multipleTable.toggleRowSelection()
* 因此要在翻页的时候去对比右侧数据中被临时删除的数据
*/
this.$nextTick(() => {
this.multipleSelectionMove = [];
let reomveArr = [];
//从所有选中的数据中去遍历查找，若未找到，则说明在右侧的数据中已经移除，那么就要重新赋值对应的选中项，使其变成未选中的状态
this.multipleSelectionAll.forEach(row => {
let findRow = this.multipleSelection.find(
item => item.userGuid === row.userGuid
);
if (!findRow) {
reomveArr.push(row);
}
});
//将未对比到的数据取消勾选
this.toggleSelection(reomveArr);
});
}
});
},
//勾选对应数据，同步到储存的数据数组中
handleSelectionChange(val) {
this.multipleSelectionAll = val;
//此处使用了深拷贝，因为这里要针对勾选的数据进行手机号的修改，不这样做的话会造成左侧列表数据和右侧数据同步修改
let _obj = JSON.stringify(val);
let objClone = JSON.parse(_obj);
/**
* 解决问题：当用户在右侧删除了不在本页的数据，并且用户再次勾选，此时 val 中仍然为所有勾选的数据，右侧再次出现之前删除的数据
* multipleSelectionMove 记录了不在当前页被删除的临时数据
*/
if (this.multipleSelectionMove.length) {
//当存在临时删除数据时，用户再次在左侧勾选，此时会对比出不需要再次同步的数据，这样就不会出现上面提到的问题
objClone.map((v, index) => {
this.multipleSelectionMove.map(mo => {
if (mo.userGuid === v.userGuid) {
objClone.splice(index, 1, null);
}
});
});
let arr = objClone.filter(f => f);
this.multipleSelection = arr;
} else {
//当不存在临时删除数据时，即不存在跨页面删除的数据，那么就直接同步勾选数据
this.multipleSelection = objClone;
}
},
//移除选择的用户
toRemove(id) {
//找到对应的数据下标
let index = this.multipleSelection.findIndex(
item => item.userGuid === id
);
let row = this.multipleSelection[index];
//移除时需要移除储存数据的数组
this.multipleSelection.splice(index, 1);
//移除后执行此方法，用来消除列表中勾选的数据
this.toggleSelection([row]);
},
//用于同步消除勾选的列表数据
toggleSelection(rows) {
/**
* 因为在同步勾选数据 handleSelectionChange 中我们做了深拷贝
* 所以在这里如果直接执行this.$refs.multipleTable.toggleRowSelection()方法是无效的（原因目前不清楚）
* 因此通过对比左侧数据，判断右侧移除的数据是否在其中（原因：在分页情况下，去取消未在当前页的数据时会报错，所以才建立了 临时删除数组 multipleSelectionMove）
*/
rows.map(row => {
let tabRow = this.tableData.find(
item => row.userGuid === item.userGuid
);
// 遍历发现存在，取消勾选
if (tabRow) {
this.$refs.multipleTable.toggleRowSelection(tabRow);
} else {
// 遍历发现不存在，储存在临时删除的数组中，数组会在翻页的时候重置
this.multipleSelectionMove.push(row);
// console.log(this.multipleSelectionMove);
}
});
}
}
};
</script>
<style scoped>
.table-line {
display: flex;
}
</style>
