一文读懂ElementUI中的toggleSelection()函数

toggleSelection 是 ElementUI 表格组件（el-table）的一个方法，用于切换数据行的选择状态。你可以通过引用表格组件的 ref 属性来调用此方法。

以下是一个简单的例子，演示如何使用 toggleSelection 方法：

<template>
  <div>
    <el-button @click="toggleSelection(tableData[1])">选中第二行</el-button>
    <el-table
      :data="tableData"
      ref="multipleTable"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: 'John' }, { date: '2016-05-04', name: 'Smith' }],
      multipleSelection: []
    };
  },
  methods: {
    toggleSelection(row) {
      this.$refs.multipleTable.toggleSelection(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

在这个例子中，我们定义了一个按钮，当点击时会调用 toggleSelection 方法，并传递 tableData 数组中第二个对象作为参数。这会使得表格中第二行的选择状态切换。handleSelectionChange 方法用于监听选择项的变化，以便我们可以跟踪当前被选中的行。