vue中实现分页数据多选

1.实现效果

2.实现原理
1.引入iview组件库，使用iview的Table组件+Page组件。

2.在columns列加入type: “selection”,设置Table的选择事件。@on-select-all，@on-select-all-cancel，@on-select，@on-select-cancel。

3.假设有禁用项，为禁用项设置_disabled为true，当进行全选或全部选时，只针对_disabled为false的数据。

4.data中设置checkedList:[],表示选择的数据的合集，这里以数据的id为例。

5.当选中其中一项的时候，先判断checkedList是否含有改数据，用includes来判断，当无数据的时候，push进checkedList，反之不进行操作。

6.当取消选中的时候，用indexOf去checkedList查找相应的索引，如果返回的索引不为-1，则用splice删除数据。

7.重点！！ 当点击上一下，下一页的时，调用获取表格数据的接口，在这个接口中调用selectedData事件，该事件处理为：当checkedList不为空，表格数据中去匹配checkedList里面的值，如果能匹配到，设置该项的_checked为true；

8.当点击刷新时，重新获取接口，并将checkedList置为空，实现数据的重筛。

注:includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

注：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。

注：splice() 方法向/从数组添加/删除项目，并返回删除的项目，该方法会改变原始数组。

3.实现代码
页面代码
 

<template>
  <div class="content">
    <Card>
      <p slot="title">分页多选数据</p>
      <template slot="extra">
        <Button type="primary" icon="md-sync" @click="reset()" class="mr10"
          >刷新</Button
        >
        <Button type="primary" @click="batch">批量操作</Button>
      </template>
      <Table
        class="table"
        border
        stripe
        :columns="columns"
        :data="tbList || []"
        @on-select-all="selectAll"
        @on-select-all-cancel="cancelAll"
        @on-select="tableSelectRow"
        @on-select-cancel="tableSelectCancelRow"
      >
        <template slot-scope="{ index }" slot="index">
          {{ (params.page - 1) * params.pageSize + index + 1 }}
        </template>
        <template slot-scope="{ row }" slot="iconCover">
          <Avatar shape="square" size="large" :src="row.icon_cover" />
        </template>
      </Table>
      <div>
        <Page
          class="public-page"
          :style="{ marginTop: '20px' }"
          :total="total"
          :current.sync="params.page"
          :page-size-opts="[10, 20, 30, 100]"
          :page-size="params.pageSize"
          show-sizer
          show-total
          prev-text="Previous"
          next-text="Next"
          show-elevator
          @on-change="(val) => pageNumChange(val, 'params')"
          @on-page-size-change="(val) => pageSizeChange(val, 'params')"
        />
      </div>
    </Card>
  </div>
</template>

 

<script>
const columns = [
  {
    type: "selection",
    width: 60,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    slot: "index",
    width: 80,
    align: "center",
  },
  {
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    title: "名称",
    key: "name",
    align: "center",
    ellipsis: true,
  },
  {
    title: "年龄",
    key: "age",
    align: "center",
  },
  {
    title: "创建时间",
    key: "dateTime",
    align: "center",
  },
  {
    title: "头像",
    slot: "iconCover",
    align: "center",
  },
];
export default {
  data() {
    return {
      columns,
      params: {
        page: 1,
        pageSize: 10,
      },
      tbList: [],
      total: 0,
      checkedList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.$loading.show();
      const { code, data, total } = await this.$api.tableList(this.params);
      if (code == "200") {
        this.tbList = data;
        this.total = total;
        setTimeout(() => {
          this.$loading.hide();
        }, 100);
        this.tbList.forEach((item, index) => {
          if (index % 2 == 0) {
            this.$set(this.tbList[index], "_disabled", false);
          } else {
            this.$set(this.tbList[index], "_disabled", true);
          }
        });
        this.selectedData();
      }
    },
    pageNumChange(page, type) {
      if (type == "params") {
        this[type].page = page;
        this.getList();
      }
    },
    pageSizeChange(pageSize, type) {
      this[type].pageSize = pageSize;
      if (type == "params") {
        if (this[type].page == 1) {
          this.getList();
        } else {
          this[type].page = 1;
        }
      }
    },
    reset() {
      this.params.page = 1;
      this.params.pageSize = 10;
      this.checkedList = [];
      this.getList();
    },
    tableSelectRow(selection, row) {
      if (!this.checkedList.includes(row.id)) {
        this.checkedList.push(row.id);
      }
    },
    tableSelectCancelRow(selection, row) {
      var index = this.checkedList.indexOf(row.id);
      if (index != -1) {
        this.checkedList.splice(index, 1);
      }
    },
    selectAll() {
      this.tbList.forEach((item) => {
        if (item._disabled == false) {
          this.tableSelectRow(null, item);
        }
      });
    },
    cancelAll() {
      this.tbList.forEach((item) => {
        if (item._disabled == false) {
          this.tableSelectCancelRow(null, item);
        }
      });
    },
    selectedData() {
      if (this.checkedList.length > 0) {
        this.tbList.forEach((item, index) => {
          if (this.checkedList.includes(item.id)) {
            this.$set(this.tbList[index], "_checked", true);
          }
        });
      }
    },
    batch() {
      if (this.checkedList.length == 0) {
        return this.$Message.error("尚未选择呢");
      }
      console.log(this.checkedList);
    },
  },
};
</script>