iview table的多选分页配置

iview提供了table组件，可以设置多选。但是当涉及到分页时，要做很多工作

分页table

我的思路：

每次从服务器获取数据后，调用updateChecked方法

给table渲染数据加上_checked=true，会显示已选中(iview的api)

    //把源数据加上_checked字段，遍历已选项数据，更新选中状态
    updateChecked() {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i]._checked = false;
        for (var j = 0; j < this.selected.length; j++) {
          if (this.selected[j].game_id === this.tableData[i].game_id) {
            this.tableData[i]._checked = true;
          }
        }
      }
    }

监听 选中/取消

remove uniqBy differenceBy这几个方法来自loadsh，极大方便了数据处理

    handleCancel(selection, row) {
      //监听取消选中某一项，从已选项中删除取消项，row代表取消选择的项数据
      remove(this.selected, n => {
        return n.game_id === row.game_id;
      });
    },
    handleSelect(selection, row) {
      //监听选中某一项，添加到已选项
      this.selected.push(row);
    },
    handleSelectAll(selection) {
      //监听全选，有可能用户先单独选择了某几项，被我们push进去，然后再点了全选，因此数组合并需要去重一下
      this.selected = uniqBy(this.selected.concat(selection), "game_id");
    },
    handleCancelSelectAll(selection) {
      //监听取消全选，从已选项中移除当页数据
      this.selected = differenceBy(this.selected, this.tableData, "game_id");
    }

全部代码如下

<template>
  <div>
    <Modal draggable v-model="modalShow" width="560" :styles="{top: '0px'}">
      <p slot="header" style>
        <span>已配置游戏列表</span>
      </p>
      <div @click="modalAShow= true ">
        <Table
          @on-select-all-cancel="handleCancelSelectAll"
          @on-select-all="handleSelectAll"
          @on-select="handleSelect"
          @on-select-cancel="handleCancel"
          height="550"
          border
          ref="selection"
          :columns="columns"
          :data="tableData"
        ></Table>
        <div style="margin-top:10px">
          <Page
            @on-page-size-change="pageSizeChange"
            @on-change="pageChange"
            :total="total"
            :page-size="pageSize"
            show-sizer
            :page-size-opts="[5,10,15,20,30,40]"
            show-elevator
          />
        </div>
      </div>
      <div slot="footer">
        <Button @click="modalASubmit()" type="primary">确定</Button>
        <Button @click="modalShow=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
const uniqBy = require("lodash.uniqby");
const remove = require("lodash.remove");
const differenceBy = require("lodash.differenceby");

export default {
  props: {
    fromArr: {
      type: Array,
      default: function() {
        return [];
      }
    },
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "game_id",
          key: "game_id"
        },
        {
          title: "游戏名称",
          key: "name"
        },
        {
          title: "标记",
          key: "sign"
        }
      ],
      tableData: [],
      modalShow: this.value,
      page: 0,
      pageSize: 10,
      total: 0,
      selected: [],
      curPageSelected: []
    };
  },
  created() {
    this.getGameList();
  },
  methods: {
    pageChange(page) {
      this.page = page - 1;
      this.getGameList();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.page = 0;
      this.getGameList();
    },
    getGameList() {
      this.axios
        .get(
          `http://xxx:55555/v1/ranking/get_all_game/?page=${this.page}&size=${this.pageSize}`,{headers: token:
                "teacher_2%7C1%3A0%7C10%3A1558061727%7C8%3Ausername%7C8%3AYWRtaW4%3D%7C59ae83951033f0861187d615765a2c2c75aeb859df9670b95c3440d737dd6b89",
              uid: 31
            }
          }
        )
        .then(res => {
          this.tableData = res.data;
          this.total = res.total;
          this.updateChecked();
        });
    },
    handleCancel(selection, row) {
      //从已选项中去除取消项
      remove(this.selected, n => {
        return n.game_id === row.game_id;
      });
    },
    handleSelect(selection, row) {
      //添加到已选项
      this.selected.push(row);
    },
    handleSelectAll(selection) {
      //数组合并，有可能用户先选择了某几项，已经被我们push进去，因此数组合并需要去重一下
      this.selected = uniqBy(this.selected.concat(selection), "game_id");
    },
    handleCancelSelectAll(selection) {
      //从已选项中移除当页数据
      this.selected = differenceBy(this.selected, this.tableData, "game_id");
    },
    //把源数据加上_checked字段，遍历已选项数据，更新选中状态
    updateChecked() {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i]._checked = false;
        for (var j = 0; j < this.selected.length; j++) {
          if (this.selected[j].game_id === this.tableData[i].game_id) {
            this.tableData[i]._checked = true;
          }
        }
      }
    },
    modalASubmit() {
      console.log(uniqBy(this.selected, "game_id"));
      return;
      this.modalShow = false;
    }
  }
};
</script>

总结

就是维护了一个selected数组，监听用户的选择，用来增删已选项，每次分页调取接口时更新tabledata的_checked属性