table表格实现全选反选，并渲染在页面上

1、做了关于elment实现全选反选并渲染在页面的需求记录一下。　

 

 

<template>
  <div class="Candidates_slelted">
    <div
      v-for="(item, index) in idList"
      :key="index"
      class="Candidates_slelted_frame"
    >
      <div>
        {{ item.examRoomName }}
        <span @click="examRemove(item, index)">X</span>
      </div>
    </div>
  </div>
  <el-table
    @selection-change="handleSelectionChange"
    @select="handleSelection"
    @select-all="handleSelectionAll"
    ref="multipleTable"
    :data="tableData"
    border
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="teachingBuildingName" label="教学楼" width="220" />
    <el-table-column prop="examRoomName" label="教室" width="220" />
    <el-table-column prop="studentNum" label="容纳考生数" />
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          examRoomName: "新教学楼103",
          studentNum: 9,
          teachingBuildingName: "新教学楼1",
        },
        {
          examRoomName: "新教学楼104",
          studentNum: 8,
          teachingBuildingName: "新教学楼2",
        },
        {
          examRoomName: "新教学楼105",
          studentNum: 7,
          teachingBuildingName: "新教学楼3",
        },
        {
          examRoomName: "新教学楼106",
          studentNum: 6,
          teachingBuildingName: "新教学楼4",
        },
        {
          examRoomName: "新教学楼107",
          studentNum: 5,
          teachingBuildingName: "新教学楼5",
        },
      ],
      idList: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(value) {
      this.multipleSelection = [...value];
    },
    handleSelection(val, row) {
      this.multipleSelection = [...val];
      let flag = true;
      let idx = 0;
      this.idList.forEach((item, index) => {
        if (item.teachingBuildingName == row.teachingBuildingName) {
          //表示有此条数据
          flag = false; //需要删掉
          idx = index;
        }
      });
      if (flag) {
        this.idList.push(row);
      } else {
        this.idList.splice(idx, 1);
      }
    },
    handleSelectionAll(val) {
      if (val.length > 0) {
        let newChecked = [];
        newChecked = val.map((item, index) => {
          let obj = {};
          obj.teachingBuildingName = item.teachingBuildingName;
          obj.examRoomName = item.examRoomName;
          return obj;
        });
        //全选之前，当前已选中里是否有数据，有则需判断数据是否有重复
        //除去重复的，需新增的数据为addList
        let addList = [];
        newChecked.forEach((item, index) => {
          let flag = false;
          this.idList &&
            this.idList.forEach((x, i) => {
              if (item.teachingBuildingName == x.teachingBuildingName) {
                flag = true;
              }
            });
          if (!flag) {
            addList.push(item);
          }
        });
        this.idList = this.idList.concat(addList);
      } else {
        //取消全选，判断数据，将已选中里包含的全选数据删掉,保留剩余数据
        let stayList = [];
        this.idList.forEach((item, index) => {
          let flag = false;
          this.tableData.forEach((x, i) => {
            if (item.teachingBuildingName == x.teachingBuildingName) {
              flag = true;
            }
          });
          if (!flag) {
            stayList.push(item);
          }
        });
        this.idList = stayList;
      }
    },
    examRemove(item, index) {
      this.multipleSelection = this.multipleSelection.splice(index, 1);
      this.idList.splice(index, 1);
      this.toggleSelection(this.multipleSelection);
    },
    toggleSelection(rows) {
      this.$nextTick(function () {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
  },
};
</script>
<style scoped>
.Candidates_slelted {
  display: flex;
  flex-flow: row wrap;
  margin-top: 10px;
}
.Candidates_slelted_frame {
  cursor: pointer;
  color: black;
  padding: 3px;
  background: #ffffff;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 4px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>

 接口数据

 //教学楼列表数据
    async teachingBuilding(type) {
      const { data: res } = await http(
        `/fifRegistration/examBook/examRoomList?buildingOrRoomName=${this.Tmodifinput}`,
        "get"
      );
      this.tableData = res.data;
      this.total = res.data.length;
      this.$nextTick(() => {
        let checkedArr = [];
        this.idList = this.ftechAllList;
        this.tableData.forEach((item) => {
          this.idList.forEach((ele) => {
            if (item.examRoomId == ele.examRoomId) {
              checkedArr.push(item);
            }
          });
        });
        this.toggleSelection(checkedArr);
      });
    },