Vue-ElementUI实现前端多选框切换分页选择保留之前选的数据,分页选择、回显功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
前端页面开发经常会遇到切换分页时,之前页面选的数据不会保存以及选择的数据如何回显的问题。
然后之前写的方法还有个bug:新增数据时,选择多个分页的数据保存后,进入编辑页。如果直接保存的话只会提交首页选择的数据;如果是分页一页一页点击过去,最后保存的话就会提交全部页面的数据。
后面排查出问题主要是之前使用@selection-change="handleSelectionChange"搞的鬼,所以我想到的解决方案之一是去掉此方法。在selectOne和selectAll方法中去处理handleSelectionChange的逻辑
// 多选框选中数据
handleSelectionChange(selection) {
let selectIds = []
selection.forEach((item) => {
selectIds.push(item.id);
});
this.selectIdList = selectIds;
}
【实现方案】
el-table标签中使用以下属性:
@select、@select-all、:row-key
el-table-column标签中使用属性:
:reserve-selection
<el-table v-loading="loading" ref="tableRef" :data="infoList" @select="selectOne" @select-all="selectAll" :row-key="getRowKeys">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="ID" align="center" prop="id" />
<el-table-column label="名称" align="center" prop="account" />
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getInfoList" />
data() {
return {
// 页面加载
loading: false,
// 列表总数
total: 0,
// 列表数据
infoList: [],
// 回显id列表
idList: [],
// 选中id列表
selects: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10
},
// 选中id列表(新增或编辑要保存的id列表)
selectIdList: [],
}
methods: {
// 获取原已选列表的数据
getInfo(…).then((response) => {
this.selects= response.data.rows;
}
// 加载列表方法-采用同步:先获取分页列表数据再做回显选择
async getInfoList() {
this.loading = true;
await listInfo(this.queryParams).then(response => {
this.total = response.total;
this.infoList = response.rows;
if (this.idList.length > 0) {
// 多选框回显
this.$nextTick(() => {
for (let i = 0; i < this.idList.length; i++) {
var list = this.infoList.filter(item=>item.id==this.idList[i]);
var row = list[0];
if (row) {
this.$refs.tableRef.toggleRowSelection(row, true);
}
}
});
}
this.loading = false;
});
},
// 判断单选或取消
selectOne(rows, row) {
let selected = rows.length && rows.indexOf(row) !== -1
if (selected) { // 单选
this.selects.push(row);
} else { // 取消单选
for(var i=0; i<this.idList.length; i++){
if(this.idList[i].id === row.id){
this.idList.splice(i,1);
}
}
for(var i=0; i<this.selects.length; i++){
if(this.selects[i].id === row.id){
this.selects.splice(i,1);
}
}
}
},
// 判断全选或取消
selectAll(rows, row) {
if (rows.length > 0) { // 全选
for(var i=0; i<rows.length; i++) {
// 未添加的才插入,否则数据会冗余
if (!this.selects.some(s=>s.id===rows[i].id)) {
this.selects.push(rows[i]);
}
}
} else { // 取消全选
for(var i=0; i<this.infoList.length; i++) {
for(var j=0; j<this.idList.length; j++){
// 移除当前页infoList的数据
if(this.idList[j].id === this.infoList[i].id){
this.idList.splice(j,1);
}
}
for(var k=0; k<this.selects.length; k++){
// 移除当前页infoList的数据
if(this.selects[k].id === this.infoList[i].id){
this.selects.splice(k,1);
}
}
}
}
},
// 多选框回显
getRowKeys(row) {
if (row.id) return row.id;
},
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)