站长资源网络编程
element跨分页操作选择详解
简介本文实例为大家分享了element跨分页操作选择的具体代码，供大家参考，具体内容如下业务需求：在批量导出或者批量删除的时候会涉及到跨分页导出或者批量删除，这是你会发现，当你选择后点击分页，发现之前选择的数据已经没有了,现在就是要满足分页点击分页后原始数据保留
本文实例为大家分享了element跨分页操作选择的具体代码，供大家参考，具体内容如下
业务需求：在批量导出或者批量删除的时候会涉及到跨分页导出或者批量删除，这是你会发现，当你选择后点击分页，发现之前选择的数据已经没有了,现在就是要满足分页点击分页后原始数据保留
<template>
<div>
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%;"
header-align="left"
border
ref="table"
row-key="serviceDateId"
@selection-change="handleSelectionChange"
@row-dblclick="toDetail"
@sort-change="sortChange"
>
<el-table-column type="selection" el-table-column width="50" fixed="left"></el-table-column>
<el-table-column label="序号" width="80" fixed="left">
<template slot-scope="{row,$index}">
<span>{{$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="服务日期" prop="serviceDate" sortable="custom" min-width="120" ></el-table-column>
<el-table-column label="服务对象" prop="vsoName" min-width="120"></el-table-column>
<el-table-column label="身份证号" prop="idCard" sortable="custom" min-width="200"></el-table-column>
<el-table-column label="服务内容" prop="serviceContentName" min-width="200"></el-table-column>
<el-table-column label="服务结果" prop="serviceResultName" min-width="100"></el-table-column>
<el-table-column label="志愿者" prop="volunteerName" sortable="custom" min-width="120" show-overflow-tooltip></el-table-column>
<el-table-column label="志愿者所属组织" prop="objName" min-width="200" show-overflow-tooltip></el-table-column>
<el-table-column fixed="right" label="操作" width="150" header-align="center">
<template slot-scope="{row,$index}">
<span @click="handleEdit(row)" class="table-btn" v-has="{class: '编辑'}">编辑</span>
<span @click="handleRemove($index, row)" class="table-btn"
v-has="{class: '删除'}">删除</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getData(form)"
/>
</div>
</template>
<script>
export default {
data(){
return{
ruleForm: {
username: '',
password:''
},
form: {
pageNum: 1, // 分页页数
pageSize: 10, // 分页数量
},
multipleSelection: [], //多选的行数据
multipleSelectionAll:[],// 当前页选中的数据
idKey: 'idCard',
}
},
methods: {
setSelectRow() {
if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
return;
}
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let selectAllIds = [];
let that = this;
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
this.$refs.table.clearSelection();
for(var i = 0; i < this.tableData.length; i++) {
if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
// 设置选中，记住table组件需要使用ref="table"
this.$refs.table.toggleRowSelection(this.tableData[i], true);
}
}
},
// 记忆选择核心方法
changePageCoreRecordData () {
// 标识当前行的唯一键的名称
let idKey = this.idKey;
let that = this;
//如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
if (!this.multipleSelectionAll.length) {
this.multipleSelectionAll = this.multipleSelection;
return;
}
// 总选择里面的key集合
let selectAllIds = [];
this.multipleSelectionAll.forEach(row=>{
selectAllIds.push(row[idKey]);
})
let selectIds = []
// 获取当前页选中的id
this.multipleSelection.forEach(row=>{
selectIds.push(row[idKey]);
// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
that.multipleSelectionAll.push(row);
}
})
let noSelectIds = [];
// 得到当前页没有选中的id
this.tableData.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.multipleSelectionAll.length; i ++) {
if (that.multipleSelectionAll[i][idKey] == id) {
// 如果总选择中有未被选中的，那么就删除这条
that.multipleSelectionAll.splice(i, 1);
break;
}
}
}
})
},
// 多选的行数据
handleSelectionChange(val) {
this.multipleSelection = val
setTimeout(()=>{
this.changePageCoreRecordData();
}, 50)
},
// 获取表格数据
getData(form) {
let parmas = _.cloneDeep(form);
parmas.liveArea = typeof(parmas.liveArea) === 'object'"sass" scoped>
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：vue实现列表滚动的过渡动画
下一篇：vue实现数字滚动效果