表格多选问题？

Question

<template>
  <div id="app">
    <el-table
      ref="multipleTable"
      :data="tableList"
      @select-all="handleSelectAll"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="表格" align="center" prop="tableName" />
    </el-table>
  </div>
</template>

<script>


export default {
  name: "App",
  data() {
    return {
      tableList: [
        {
          tableName: "222"
        },
        {
          tableName: "222"
        },
        {
          tableName: "222"
        },
        {
          tableName: "222"
        },
        {
          tableName: "222"
        },
        {
          tableName: "222"
        },
        {
          tableName: "222"
        }
      ],
      allSelection: []
    };
  },
  methods: {
    handleSelectAll(selection) {
      if (selection.length > 0) {
        this.allSelection = selection;
        console.log(this.allSelection, "点了全选");
      } else {
        console.log(this.allSelection, "取消全选");
      }
    }
  }
};
</script>

为什么取消全选这里的输出 this.allSelection 这里是空的？

Answer 1

handleSelectAll(selection) {
  if (selection.length === this.tableList.length) {
    this.allSelection = JSON.parse(JSON.stringify(selection)); 
    console.log(this.allSelection, "点了全选");
  } else if (selection.length === 0) {
    console.log(this.allSelection, "取消全选，但数据不丢失");
    this.$refs.multipleTable.clearSelection(); // 清除选中状态
  }
}

Answer 2

你这个代码看着没问题呢，取消全选是应该为空