javascript - el-table调用方法出现toggleRowSelection is not a function？

Question

<el-table
  ref="multipleTable"
  :data="allDatas"
  @selection-change="handleSelectionChange"
>
getChildren(cur, data) {
  this.allDatas = JSON.parse(JSON.stringify(data))
  setTimeout(() => {
    this.$nextTick(() => {
      this.allDatas.forEach(row => {
        if (this.checkDatas.find(item => item.id === row.id)) {
          console.log(this.$refs.multipleTable)
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      })
    })
  }, 2000);
},

Answer 1

在 Element UI 的 <el-table> 组件中，toggleRowSelection 并不是 <el-table> 组件本身提供的方法。这个方法实际上是 <el-table-selection> 插槽或内部处理多选逻辑时使用的，但它不是直接暴露给外部通过 ref 访问的。

要解决这个问题，你应该使用 Element UI 提供的多选功能来管理行的选中状态，而不是直接调用 toggleRowSelection。Element UI 的 <el-table> 组件通过 type="selection" 的 <el-table-column> 来支持多选，并通过 selection-change 事件来响应选中项的变化。

以下是一个改进后的例子，展示如何管理行的选中状态：

<template>
  <el-table
    ref="multipleTable"
    :data="allDatas"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      allDatas: [], // 初始数据
      selectedRows: [], // 已选中的行
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    getChildren(cur, data) {
      this.allDatas = JSON.parse(JSON.stringify(data));
      this.selectedRows = data.filter(row => this.checkDatas.find(item => item.id === row.id)).map(row => row);
      // 注意：这里不需要调用 toggleRowSelection，因为 Element UI 会自动根据 selectedRows 更新选中状态
      // 如果你需要立即看到效果，可以调用 this.$forceUpdate() 强制重新渲染组件
    },
    // 其他方法...
  },
  // ...
};
</script>

在这个例子中，getChildren 方法会根据 checkDatas 数组来更新 selectedRows 数组，而 Element UI 会根据 selectedRows 自动更新表格中行的选中状态。你不需要直接调用 toggleRowSelection，因为 Element UI 的内部机制已经处理了这些。

如果你的场景需要更复杂的选中逻辑，并且你确实需要直接控制选中状态，你可能需要查看 Element UI 的内部实现或使用其他方式来达到目的，但通常不推荐直接操作内部方法，因为这可能会导致不可预测的行为或未来的兼容性问题。