ElementPlus使用el-dialog或el-table等组件加载报错

在使用ElementPlus时，使用el-dialog或el-table等组件时，若未完全加载组件就多选组件内数据时，可能会出现此问题，如果不添加延时加载数据等方法，出现报错情况会很频繁。

错误内容：

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

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

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

<template>
  <el-table
    :data="tableData"
    height="420"
    style="width: 100%"
    v-loading="loading"
    tooltip-effect="light"
    row-key="id"
    :stripe="true"
    :default-sort="{prop: 'sort', order: 'descending'}"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
  border>
    <!-- 多选框 -->
    <el-table-column type="selection" :reserve-selection="true" width="40" align="center" fixed=""> </el-table-column>
    <!-- 自定义加载表格列 -->
    <el-table-column type="index" label="序号" width="50" align="center" fixed="left"/>
    <el-table-column prop="orderId" label="订单主键" width="80"  show-overflow-tooltip v-if="false"/>
  </el-table>
</template>
<script setup>
  //引用省略...
  //定义参数
  const loading = ref(false);
  const tableData = ref<any>([]);
  const queryParams = ref<any>({}); 
  
////////////多选////////////
//表格
const multipleTable = ref()
//存放当前选取的数据
const multipleSelection = ref([] as any)
//多选框的状态变化时触发
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    console.log("multipleSelection.value:",multipleSelection.value);
}
////////////多选////////////
// 查询操作
const handleQuery = async () => { 
	loading.value = true;
	var res = await getBusOrderInfoPageList(Object.assign(queryParams.value, tableParams.value));
	tableData.value = res.data.result?.items ?? [];
	tableParams.value.total = res.data.result?.total;
	loading.value = false;
};
onMounted(() => {
  nextTick(() => {
    handleQuery();//指定顺序加载
  })
})
</script>

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

<template>
 <el-dialog v-model="visible" @open="openDialog" v-if="showdialog">
      <!-- Table相关代码 -->
      <!-- ...... -->
 </el-dialog>
</template>
<script setup>
  //引用省略...
const showdialog = ref(false);
const visible = ref(false);
const openDialog = () => {
  visible.value = true;//必须为true，否则在其中的所有组件都不会加载
  showdialog.value = true;//必须为true，否则在其中的所有组件都不会加载
  nextTick(() => {
    toggleSelection(tableData.value)//指定顺序加载
  })
}

</script>