element table 多页选择回显

1. 将多页切换时非当前页的数据获取

  // 获取当前页选择之后的数据
  let accordList = this.arrFilter(this.selectedDatas, this.allList)
  resultList = [...this.selectList, ...accordList]

  arrFilter(arr = [], list = []) {
     return arr.filter(function (val) {
       return list.findIndex((item) => item.id == val.id) == -1;
     });
  }

2. 创建组件并在组件内使用，此组件多选/单选

<template>
  <el-table :data="tableData" row-key="id" ref="choiceTable"
    @selection-change="selectionChange">
    <!-- 多选 -->
    <el-table-column type="selection" align="center" width="50" :reserve-selection="true"
      v-if="isMultiple"></el-table-column>
    <!-- 单选 -->
    <el-table-column label="选择" align="center" width="80px">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id" v-model="singleChoiceId" @change="changeRadio(scope.row)"> &nbsp; </el-radio>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    isMultiple: {
      // 可多选
      type: Boolean,
      default: false
    },
    selectedDatas: {
      //当前选中的数据集合
      type: Array,
      default: () => []
    },
    limitNum: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      tableData: [],
      singleChoiceId: "",
      selectList: [],
      selectData: {}, // 当前选择的数据
    };
  },
  mounted() {
      this.singleChoiceId = this.isMultiple ? "" : this.selectedDatas[0] && this.selectedDatas[0].id || '';
      this.getList()
  },
  methods: {
    onConfirm() {
      // 多选
      if (this.isMultiple) {
        // 获取当前页选择之后的数据
        let accordList = this.arrFilter(this.selectedDatas, this.allList)
        resultList = [...this.selectList, ...accordList]
        if (resultList.length === 0) {
          this.$message.warning("请先选择");
          return;
        }
        if (this.limitNum && resultList.length > this.limitNum) {
          this.$message.warning(`最多选择${this.limitNum}个`);
          return;
        }
      } else {
        // 非当前页的单选
        if (this.isEmptyObject(this.selectData) && this.selectedDatas.length > 0) {
          this.selectData = this.selectedDatas[0]
        }
        if (this.selectData.id == null) {
          this.$message.warning("请先选择");
          return;
        }
      }
      this.$emit("getSeclectChange", this.isMultiple ? resultList : this.selectData);
    },
    // 获取列表数据
    getList() {
      api.then(res => {
        if (res.code === 0) {
          this.tableData = res.data || []; 
          // 多选回显
          if (this.isMultiple && this.selectedDatas.length > 0 && this.$refs.choiceTable) {
            this.$nextTick(function () {
              this.selectedDatas.forEach(item => {
                let result = this.tableData.find(val => val.id === item.id);
                if (result) {
                  this.$refs.choiceTable.toggleRowSelection(result, true);
                } else {
                  this.$refs.choiceTable.toggleRowSelection(result, false);
                }
              });
            })
          } else {
            // 单选
            let singleChoiceId = this.singleChoiceId;
            this.selectData = this.tableData.find(item => item.id === singleChoiceId) || {};
          }

          // 存储所有数据并去重
          let allList = [...this.allList, ...this.tableData]
          this.allList = allList.filter((item, index) => allList.indexOf(item) === index)
        }
      });
    },
    changeRadio(row) {
      this.selectData = row;
    },
    selectionChange(val) {
      this.selectList = val;
    },
    // 根据一个数组筛选另一个数组符合条件的值返回新的数组
    arrFilter(arr = [], list = []) {
      return arr.filter(function (val) {
        return list.findIndex((item) => item.id == val.id) == -1;
      });
    },
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0;
    }
  }
};
</script>

3. 在组件内使用

  <tableItem @getSeclectChange="getSeclectChange" 
      :selectedDatas="activeList"
      :isMultiple="true" :limitNum="6">
  </tableItem>
  data() {
     return {
     	activeList: []
     }
  },
   methods: {
   		getSeclectChange(list){
   			console.log(list,'选择的数据')
   		}
   }