<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @select="selectFn"
    @select-all="selectAllFn"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
  </el-table>
</template>
<script>
// 在一个对象数据中寻找某个对象的下标,通过key的值相等，判断数组中是否包含对象
const arrFindObjIndex = (arr, obj, key) => {
  let index = -1;
  arr.forEach((item, idx) => {
    if (item[key] === obj[key]) {
      index = idx;
    }
  });
  return index;
};
export default {
  data() {
    return {
      selection: [],
      tableData: [],
    };
  },
  methods: {
    //   翻页之后调用该方法
    toggleSelection() {
      //翻页之后要勾选上一页选中的,增加延时,在列表渲染完成后选中
    setTimeout(() => {
      this.selection.forEach((item) => {
        if (arrFindObjIndex(this.selection, item, "id") !== -1) {
          this.$refs["multipleTable"].toggleRowSelection(item);
        }
      });
    },500)
    },
    selectAllFn(selection) {
      if (!selection.length) {
        // 全选时，选中的数据为空时，要清理掉缓存中当页的数据
        this.tableData.forEach((item) => {
          const index = arrFindObjIndex(this.selection, item, "id");
          if (index !== -1) {
            this.selection.splice(index, 1);
          }
        });
      } else {
        // 全选时，选中的数据不为空时，要在缓存中添加当页的数据
        selection.forEach((item) => {
          const index = arrFindObjIndex(this.selection, item, "id");
          if (index === -1) {
            this.selection.push(item);
          }
        });
      }
    },
    selectFn(selection, row) {
      const flag = selection.some((item) => {
        return item.id === row.id;
      });
      const index = arrFindObjIndex(this.selection, row, "id");
      if (!flag) {
        // selection中不包含row则是取消选中该行
        if (index !== -1) {
          this.selection.splice(index, 1);
        }
      } else {
        // selection中不包含row则是选中该行
        if (index === -1) {
          this.selection.push(row);
        }
      }
    },
  },
};
</script>