以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

从表格中选中你需要的数据，应用场景：选人、选商品等等，我将讲解遇到分页或者条件查询时，如何处理，点击在线运行或者在线运行，效果如图

image.png
image.png

巧妙应用对象进行存储选中数据，机智使用计数思维做出半选中效果

html代码如下：

<template>
  <div id="app">
    <h1>table支持分页存储选中数据</h1>
    <p>
      <el-input
        v-model="param.keyWord"
        placeholder="请输入名称"
        style="width: 200px"
        @keyup.enter.native="handleSearch"
      ></el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="primary" @click="setSelect([{id:2},{id:9},{id:15}])">设置选中的数据</el-button>
      <el-button type="primary" @click="handleSelect">获取选中的数据</el-button>
    </p>
    <el-table :data="tableData" border>
      <el-table-column width="50">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="selectAll" :indeterminate="isIndeterminate" @change="changeAll"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.select" @change="changeSelect(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="count" label="数量"></el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.pageSize"
      layout="total, sizes,prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
  </div>
</template>

js代码如下：

<script>
export default {
  data() {
    return {
      param: {
        keyWord: ""
      },
      pagination: {
        pageNo: 1,
        pageSize: 10,
        total: 15
      },
      tableData: [],
      //全选状态
      selectAll: false,
      //半选状态
      isIndeterminate: false,
      // 选中数据
      multipleSelection: {}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //切换每页显示数目
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },

    // 切页
    handleCurrentChange(val) {
      this.pagination.pageNo = val;
      this.getList();
    },

    // 查询
    handleSearch() {
      this.pagination.pageNo = 1;
      this.getList();
    },

    // 请求数据，此处用静态数据模拟，正式生产替换为网络请求数据即可
    getList() {
      let list = [];
      if (this.pagination.pageNo == 1) {  //模拟第一页数据
        for (let i = 1; i <= 10; i++) {
          let item = {
            id: i,
            name: `名称${i}`,
            count: `数量${i}`
          };
          list.push(item);
        }
      }
      if (this.pagination.pageNo == 2) {  //模拟第二页数据
        for (let i = 11; i <= 20; i++) {
          let item = {
            id: i,
            name: `名称${i}`,
            count: `数量${i}`
          };
          list.push(item);
        }
      }
      list.forEach(item => {
        let key = item.id;
        if (this.multipleSelection[key]) {
          item.select = true;
        } else {
          item.select = false;
        }
      });
      this.tableData = list;
      this.checkedIndeterminate();
    },

    // 全选
    changeAll() {
      this.isIndeterminate = false;
      if (this.selectAll) {
        this.tableData.forEach(item => {
          item.select = true;
          let key = item.id;
          this.multipleSelection[key] = item;
        });
      } else {
        this.tableData.forEach(item => {
          item.select = false;
          let key = item.id;
          delete this.multipleSelection[key];
        });
      }
    },

    // 单条选
    changeSelect(item) {
      let key = item.id;
      if (item.select) {
        this.multipleSelection[key] = item;
      } else {
        delete this.multipleSelection[key];
      }
      this.checkedIndeterminate();
    },

    // 检查半选状态
    checkedIndeterminate() {
      let value = 0;
      this.tableData.forEach(item => {
        let key = item.id;
        if (this.multipleSelection[key]) {
          value++;
        }
      });
      if (value == 0) {
        //全部是未选状态
        this.isIndeterminate = false;
        this.selectAll = false;
      } else if (value == this.tableData.length) {
        //全部是选中状态
        this.isIndeterminate = false;
        this.selectAll = true;
      } else {
        //半选中状态
        this.isIndeterminate = true;
        this.selectAll = false;
      }
    },

    // 设置选中的数据
    setSelect(val) {
      this.multipleSelection = {};
      val.forEach(item => {
        let key = item.id;
        this.multipleSelection[key] = item;
      });
      this.param.keyWord = "";
      this.pagination.pageNo = 1;
      this.getList();
    },

    // 获取选中的数据
    handleSelect() {
      let arr = Object.values(this.multipleSelection);
      console.log(arr);
    }
  }
};
</script>