Element UI Table组件使用中遇到的问题

1.多选表格点击行选中

首先在table表格上添加 @row-click="handleRowClick" 方法，然后在handleRowClick（）中执行this.$refs.multipleTable.toggleRowSelection(row,selection)方法，方法的具体使用不再多说，官网有详细解释

在开发中遇到一些问题，在这里做个总结

1. 在ts中，提示toggleRowSelection属性不存在，编译不通过
   
   打印过 console.log(this.$refs.multipleTable)，在控制台能看到这个方法

所以这应该是编辑器的误报，因为ts无法识别组件类型，经过尝试，显示声明下，然后再调用toggleRowSelection（）可以解决问题：

/**
  * 点击行设置选中状态
   */
  handleRowClick(row: any, column: any, event: any) {
    this.$nextTick(() => {
      const ref: any = this.$refs.multipleTable_;
      ref.toggleRowSelection(row, true);
    });
  }

2. toggleRowSelection（）方法不生效

这个导致问题的原因可能有以下几个：

• 一是可能数据未完全返回，Dom还没有渲染完成，可以使用 $nextTick解决；使用$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
• 二是查看表格上面是否添加ref属性，this.$refs.multipleTable 中，multipleTable就是表格中配置的ref属性
• 三是查看页面中有几个表格，如果有多个，查看表格的ref属性值是否相同，如果相同，也会导致toggleRowSelection（）的无效。页面中有几个表格就应该有几个ref属性