目的:实现进入页面显示默认的选中项,在用户重新选择后,将选择的和取消选择的数据提交给后台;这里涉及到一个分页的问题,表格是可分页的表格,所以要存储用户的选项
1.element-ui的table表格的多选框默认选中
data(){
return{
tableData:[],//table数据
}
},
watch:{
tableData(val){
this.$nextTick(()=>{
this.tableData.forEach(row => {
if(row.acState=="N"){ //判断是否是选中数据
this.$refs.dataTable.toggleRowSelection(row,true);
}
})
})
}
},
2.element-ui的table表格的多选框分页存储选择状态
因为每次加载table列表数据,都会重新加载数据,会回到初始状态,需要存储一下用户的选择状态。最好的方法是,根据当前页,存储到一个总的对象中,这个对象存储着所有页的table列表数据,这个比较好理解,格式是{ "1":[...], "2":[...],,, }
,每次按照页数加载数据的时候,先判断这个对象有没有值,如果有值,tableData就赋值为对象中的值,如果没有,就给这个对象赋值,这样,就存储了用户的选择。
- 存储选择状态
data(){
return{
tableData: [],
mainObj: {}
}
},
getListData() {
this.$post('UserAccountQuery', {}).then(res => {
if(!this.mainObj[this.currentIndex]){
this.mainObj[this.currentIndex] = res.data.accountList;
this.tableData = res.data.accountList;
}else{
this.tableData = this.mainObj[this.currentIndex];
}
})
},
- 更改选择状态
methods:{
handleSelectionChange(val){
this.mainObj[this.currentIndex].forEach(item => {
let ac = val.find((item2)=>{
return item2.acNo == item.acNo
});
item.acState = ac ? "N" : "D";
});
},
}
这时出现一个问题,选中的时候,val是一个一个加的,数组是手动增加的;但是如果进入页面,toggleRowSelection用代码驱动它更改选中状态的时候,也是一个一个加的,如果设置了item.acState = ac ? "N" : "D"
,那么会出现只选中了第一个选中的值,其他的会值为非选中,所以要判断,是用户手动选中的,还是进入页面设置选中值的;所以就加了一个变量manualSel
watch:{
tableData(val){
this.$nextTick(()=>{
this.tableData.forEach(row => {
if(row.acState=="N"){ //判断是否是选中数据
this.manualSel = true; //只有在这里进行的设置选中,不进行mainObj数据处理
this.$refs.dataTable.toggleRowSelection(row,true);
}
})
})
}
},
methods:{
handleSelectionChange(val){
if(val.length<1) return; //这个一定要加上,因为翻页的时候经常会走这个方法,而且val为空,很恶心,所以这个一定要加上
if(!this.manualSel){
this.mainObj[this.currentIndex].forEach(item => {
let ac = val.find((item2)=>{
return item2.acNo == item.acNo
});
item.acState = ac ? "N" : "D";
});
}
this.manualSel = false;
},
}
最终案例
<template>
<div class="page-wrapper">
<div class="page-title">
<p>电子对账账户维护</p>
</div>
<div class="page-header" style="padding:10px 20px 14px">
<el-form
class="filter-box"
:inline="true"
:model="queryData"
ref='queryData'>
<el-form-item label="操作员号" prop="userId" style='width: 50%'>
{{queryData.userId}}
</el-form-item>
<el-form-item label="操作员姓名" prop="userName" style='width: 50%'>
{{queryData.userName}}
</el-form-item>
</el-form>
</div>
<div class="page-body">
<el-table stripe
border
style="width: 100%; height:auto; overflow: auto"
:data="tableData"
:header-row-class-name="'table-header-custom'"
:header-cell-style="{background:'#ECF8FF',color: '#333333',textAlign:'center',fontFamily:'PingFangSC-Medium',fontSize:'14px'}"
v-loading="dataListLoading"
class="transQry"
ref="dataTable"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="50"
label="选择"
align="center"></el-table-column>
<el-table-column label="账号" prop="acNo" align="center"></el-table-column>
<el-table-column label="币种" prop="currency" align="center">
<template slot-scope="scope">
{{$util.currencyChange(scope.row.currency)}}
</template>
</el-table-column>
</el-table>
<m-pagination @sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
@jumpToPage="jumpToPage"
:currentIndex="currentIndex"
:pageSize="pageSize"
:totalPage="totalPage"
:record-number="recordNumber">
</m-pagination>
</div>
<el-row class="btnInfo" style="margin-bottom:30px">
<el-button class="submitBtn" @click="back">返回</el-button>
<el-button type="primary" class="submitBtn" @click="transReviewPass">提交</el-button>
</el-row>
</div>
</template>
<script>
import mPagination from '@/components/m-pagination'
export default {
name: 'accountDetaill',
data(){
return{
selectRows: [],
queryData: {},
tableData: [],
mainObj: {},
currentIndex: 1,
pageSize: 10,
recordNumber: 0,
dataListLoading: false,
manualSel: false,//判断是toggleRowSelection程序自动设置的选中项,还是用户手动选择的
}
},
components: {
mPagination
},
computed: {
totalPage() {
return Math.ceil(this.recordNumber / this.pageSize)
}
},
watch:{
tableData(val){
this.$nextTick(()=>{
this.tableData.forEach(row => {
if(row.acState=="N"){
this.manualSel = true;
this.$refs.dataTable.toggleRowSelection(row,true);
}
})
})
}
},
created() {
this.queryData = this.$sessionStorage.get("formDataOperatorManage");
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.getListData ? this.getListData() : '';
},
handleCurrentChange(val) {
this.currentIndex = val;
this.getListData ? this.getListData() : '';
},
jumpToPage(val) {
this.currentIndex = val;
this.getListData ? this.getListData() : '';
},
back(){
this.$router.push('/operatorManage');
},
handleSelectionChange(val){
if(val.length<1) return;
this.selectRows = val;
if(!this.manualSel){
this.mainObj[this.currentIndex].forEach(item => {
let ac = this.selectRows.find((item2)=>{
return item2.acNo == item.acNo
});
item.acState = ac ? "N" : "D";
});
}
this.manualSel = false;
},
getListData() {
this.dataListLoading = true;
this.$post('UserAccountQuery', Object.assign(this.queryData,{
startNum: this.currentIndex,
totalNum: this.pageSize,
module: "DP",
})).then(res => {
this.dataListLoading = false;
if (!res.data.jsonError) {
if(!this.mainObj[this.currentIndex]){
this.mainObj[this.currentIndex] = res.data.accountList;
this.tableData = res.data.accountList;
}else{
this.tableData = this.mainObj[this.currentIndex];
}
this.recordNumber = res.data.recordNum?parseInt(res.data.recordNum):this.tableData.length;
} else {
this.$error(res.data.jsonError[0]._exceptionMessage)
}
}).catch(err => {
this.$error("请求异常,请稍后再试");
this.dataListLoading = false;
})
},
transReviewPass(){
console.log(this.mainObj);
let list = []
for(let k in this.mainObj){
list.push(...this.mainObj[k]);
}
console.log(list)
this.$post("UserAccountChangeStateConfirm",{userAccountList : list,userId: this.queryData.userId,userName: this.queryData.userName}).then(res => {
if (!res.data.jsonError) {
this.$sessionStorage.set("DataCollectUserAccount",list)
this.$router.push('/operAcMaintainCon');
} else {
this.$error(res.data.jsonError[0]._exceptionMessage)
}
}).catch(err => {
this.$error("请求异常,请稍后再试");
})
}
},
activated(){
this.queryData = this.$sessionStorage.get("formDataOperatorManage");
if(this.$route.query.from != "back"){
this.currentIndex = 1;
this.mainObj = {};
this.getListData();
}
}
}
</script>
<style lang="scss" scoped>
/deep/.el-date-editor .el-range-separator{
width: 50px;
}
/deep/.el-form .el-form-item__content{
white-space: nowrap;
}
.chargeMoney {
width: auto;
.el-input{
width: 210px;
}
}
/deep/.el-form-item .el-range-input{
background: #f5f5f5;
}
.middle{
margin: auto 8px;
}
.transAction .transAction-header .searchResult {
text-align: right;
/deep/.el-form-item__content{
width: 100%;
}
}
/deep/.transAction .transAction-header .filter-box .el-form-item{
width: 40%;
}
/deep/.el-table th > .cell{
padding-left: 0;
padding-right:0;
}
/deep/.el-form-item .el-form-item__label{
min-width: 6em;
}
</style>
<style>
.page-wrapper .page-body .transQry.el-table td{
border-bottom: 1px solid #EBEEF5;
}
</style>