前端 - 表格多选问题？

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

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

Answer 2

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(); // 清除选中状态  }}