elementUI的table翻页记录功能实现

分享一下elementUI在vue里如何实现记忆回显数据已选中选项

  前言： 回显table数据，有很多种方式，这里将用两种方法讲解table表中选中项的回显，第一种方式适合分页数据的回显，第二种更适合单条数据的回显。

   需要回显的原因：table表分页，是在点击下一页会获取新一页的数据，在点击上一页，数据是重新请求的，因此若第一页有选中状态，点击任何页在回到第一页，选中状态会消失

  1.利用elementUI官网的row-key实现数据的回显

         数据回显的关键性使用一个row-key标识每一条数据，因此标识的值要是惟一的, 一个是reserve-selection,这个是elementUI自己定义的属性，会自带记忆功能，实现起来简单也很好理解

 

    一起来看一下页面数据吧，值得注意的是row-key是在table上，而reserve-selection是写在type为seleciton的标签上

<div class="table">
   <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeSelect"
       >
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column label="日期" width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
      </el-table>
      </div>
      <div class="pages">
        <el-pagination layout="prev, pager, next" :total="50" @current-change="changeCurrent"></el-pagination>
      </div>
    </section>
  </div>

    下面是js部分，js部分也是及其简单，这里因为row-key是方法，所以是反的，也可以直接row-key=''date'

export default {
  data() {
    return {
      tableData: [],
      multipleSelection: []
    };
  },
  methods: {
    getRowKey(row) {
      return row.date;
    },
    changeCurrent(val) {
    },
    changeSelect(selection) {
      console.log(selection);
    }
  }
};

    总结： 这个方法只需要要绑定两个属性就可以实现回显

 2.利用toggleRowSelection实现回显

    其实toggleRowSelection更加适合于单条数据的回显，会很快，但是用它来实现分页table的数据回显就会有很多小坑的地方，有兴趣的可以了解一下

   this.$refs.tableList.toggleRowSelection(this.tableData[i], true);  === 单条数据的回显

  下面开始讲一下用toggleRowSelection实现table分页回显

 实现分页功能很重要的一个方法 - toggleRowSelection

 也就是说，将页面显示的数据，要选中的行使用toggleRowSelection

下面开始说实现的整个过程(边写边踩坑)

先简单说下实现逻辑 -

     将每页点击的数据保存下来，当页页面数据请求成功，对比请求数据和自己保存的数据，利用toggleRowSelection将数据回显

1.界面部分

   <el-table
            :data="tableData"
            ref="tableList"
            border
            style="width: 100%"
            class="chargeDetailT"
            @selection-change="handleSelectionChange"
          >
   <el-table-column type="selection" width="45" porp="checkSate"></el-table-column>
   <el-table-column fixed prop="orderNo" label="用户充电订单号"></el-table-column>
   <el-table-column prop="startChargeSeq" label="充电桩交易订单号"></el-table-column>
   <el-table-column prop="equipmentName" label="充电桩" width="180"></el-table-column>
   <el-table-column prop="operatorName" label="运营商" width="120"></el-table-column>
   <el-table-column prop="totalPower" label="充电电量(kv)" width="120"></el-table-column>
   <el-table-column prop="customerBalanceMoney" label="充电金额(元)"></el-table-column>
   <el-table-column prop="createTime" label="创建时间" width="125"></el-table-column>
  
 </el-table>

绑定selection-change事件 -  当选择项发生变化时会触发该事件，它会自带一个参数，参数是当前页选中的数组，只需要将数组直接保存下来就行了

 getNum() {
      let sum  = 0;
      if (this.vTable) {
        for (let key in this.vTable) {
          sum += this.vTable[key].length;
        }
      }
      this.num = sum;
    },

 handleSelectionChange(val) {
      if (event === undefined || event.target.nodeName === 'INPUT') {
        this.vTable['v_' + this.currentPage] = [...val];
        this.getNum();
      }
    },

小的知识点 -

如果是直接将一行的数据row存在数组Vtable，则每次点击任何一页都循环数组,若第一页你选中了100条，第二页又点了100条，回到第一页，要循环200，其实对于我们来说，只需要100条就可以了，所以这个时候，用到对象数组，这样子点击哪一页就循环那一页的部分，性能上会提升

注意坑的部分 -

在elmentUi中，点击分页的事件和这个事件存在耦合性，也是说，他会在点击分页获取数据触发完毕会立即触发selection-change，会导致一个问题，再次点击第一页，会触发事件，这个时候的val是null，即还未回显数据，你的回显的数据已经被置为null，则永远不会进行回显

2.回显数据部分

  rowMultipleChecked() {
      if (this.vTable['v_' + this.currentPage] && this.vTable['v_' + this.currentPage].length > 0) {
        let id =  this.vTable['v_' + this.currentPage].map(row => {
          return row.id;
        });
        for (var i = 0; i < this.tableData.length; i++) {
          if (id.includes(this.tableData[i].id)) {
            //回显数据
            this.$refs.tableList.toggleRowSelection(this.tableData[i], true);
          }
        }
      }

    },

   async showList() {
      let res = await unAccountList(this.currentPage, this.pagesize);
      this.tableData = res.rows;
      this.total = res.total;
      this.$nextTick(() => {
        if (this.$refs.tableList) {
          this.rowMultipleChecked();
        }
      });
    },

回显数据 -分两步 - 获取数据。对比数据回显数据

注意：回显的是显示在界面的数据

 又要注意新坑了 - 回显数据的时候，一定要界面更新完成之后再回显 - 所以用了$nextTick

总结 - 回显，主要就是toggleRowSelection，用这个方法进行回显和记忆