el-dialog嵌套Table,默认勾选toggleRowSelection报错Cannot read properties of undefined

2,256 阅读1分钟

报错信息

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>