Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘toggleRowSelection‘)

_无妻徒刑

于 2024-01-06 15:20:44 发布

阅读量2.2k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_45909266/article/details/135426580

文章讲述了ElementUITable组件在默认多选时可能出现的报错，原因在于Table在Dialog或Drawer中未完全渲染。提供了解决方案，即在Dialog或Drawer打开时执行多选初始化，确保Table组件渲染完成后再调用toggleRowSelection方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI 的 Table 表格默认多选报错

在这里插入图片描述

该报错是由Table组件还没有完成页面渲染导致无法调用Ref 的toggleRowSelection方法所引发的
通常我们可以加一个nextTick或者setTimeout解决。

const multipleTableRef = ref() //绑定在Table上的Ref
const toggleSelection = rows => {
  rows.forEach(row => {
    multipleTableRef.value!.toggleRowSelection(row, true)
  })
}

onMounted(() => {
  nextTick(() => {
    toggleSelection(tableData.value)
  })
})

但是还有一种特殊情况就是Table写在了Dialog或者Drawer容器里，这样即便是页面完成渲染，但是因为弹窗或抽屉并没有展示，Table组件也就无法完成渲染仍然是无法调用Ref的toggleRowSelection方法。
现在导致问题的根源找到了，因此只需要把初始化默认多选的代码挪到Dialog或Drawer的open事件里去执行即可

const visible = ref(false)
const openDialog = () => {
  visible.value = true
  nextTick(() => {
    toggleSelection(tableData.value)
  })
}

 <el-dialog v-model="visible" @open="openDialog">
      <!-- Table相关代码 -->
      <!-- ...... -->
 </el-dialog>