el-table 获取选中后的某一个值（整理）

<template>
  <div>
    <div style="display: flex; margin-bottom: 20px">
      <div v-for="item in checklist" :key="item.id" @click="del([item])">
        {{ item.name }} &nbsp;
      </div>
    </div>
    <el-table :data="tableData" ref="singleTable" highlight-current-row border class="load_table"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="70"></el-table-column>
      <el-table-column prop="id" min-width="100%" label="" align="center"></el-table-column>
      <el-table-column prop="name" min-width="100%" align="center"></el-table-column>
      <el-table-column prop="school" min-width="100%" align="center"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checklist: [],
        tableData: [{
            id: 1,
            name: "123",
            school: "学校",
          },
          {
            id: 2,
            name: "张三",
            school: "学校",
          },
          {
            id: 3,
            name: "李四",
            school: "学校",
          },
          {
            id: 4,
            name: "王五",
            school: "学校",
          },
          {
            id: 6,
            name: "张六",
            school: "学校",
          },
          {
            id: 7,
            name: "刘⑦",
            school: "学校",
          },
        ],
      };
    },
    mounted() {},
    methods: {
      /**
       * 取消选中
       */
      del(rows) {
        rows.forEach((row) => {
          this.$refs.singleTable.toggleRowSelection(row);
        });
      },
      handleSelectionChange(val) {
        this.checklist = val;
      },
    },
  };
</script>
<style lang="scss" scoped>
</style>