报错信息
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toggleRowSelection')
解决方案
step1: 利用Dialog打开的回调事件open调用使用toggleRowSelection的方法
step2: $nextTick嵌套forEach循环
<el-dialog
v-model="state.assignDialog"
title="分配客户"
center
close-on-press-escape
:close-on-click-modal="false"
@open="openAssignUsers"
>
<el-dialog>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { getCustomerList } from '@/api/system/user'
const state = reactive({
multipleSelection: [],
userList: [],
assignDialog: false,
})
const assignUserFormRef = ref<InstanceType<typeof ElTable>>()
const assignUsers = () => {
if (state.multipleSelection.length) {
const { data } = await getCustomerList({ userId: state.multipleSelection[0].id })
state.userList = data
const rows = data.filter((row) => row.isExist)
nextTick(() => {
rows.forEach((row) => {
assignUserFormRef.value!.toggleRowSelection(row, true)
})
})
state.assignDialog = true
}
}
<script>