elementUI的Table分页多选框

目的：实现进入页面显示默认的选中项，在用户重新选择后，将选择的和取消选择的数据提交给后台；这里涉及到一个分页的问题，表格是可分页的表格，所以要存储用户的选项

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就赋值为对象中的值，如果没有，就给这个对象赋值，这样，就存储了用户的选择。

1. 存储选择状态

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];
  }
 })
},

2. 更改选择状态

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>