首页 前端知识 【ant-table绑定值变化页面不更新,报错Cannot read properties of undefined (reading ‘__asyncLoader‘)】

【ant-table绑定值变化页面不更新,报错Cannot read properties of undefined (reading ‘__asyncLoader‘)】

2024-06-07 00:06:47 前端知识 前端哥 526 697 我要收藏

a-table绑定值变化,报错Cannot read properties of undefined reading '__asyncLoader'

  • 1. 原代码
  • 2. 更改后的代码

问题背景: vue3项目中使用ant-design-vue中的a-table,data-source绑定值为"tableData",页面加载时调用接口获得tableData显示正常,当输入筛选条件重新搜索后获得新的tableData,此时打印tableData值已经更新,但是页面没有变化,并报Cannot read properties of undefined reading '__asyncLoader'错误。

解决思路: 一开始以为值覆盖的问题,但是写死数据仍然报错,把template slot代码均注释掉,逐步排查找了两天没有找到问题,后面把a-table注释掉,改用list发现不报错,最终确定了是a-table中插槽的问题

解决方法: vue3中a-table不在使用scopedSlots插槽,改用v-slot:bodyCell的形式使用插槽

1. 原代码

<a-table class="table" row-key="userId"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="tableHead"
            :data-source="tableData" :pagination="pagination" @change="handleTableChange">
            <template slot="userName" slot-scope="userName,record">
              <span style="color: #1890FF;cursor:pointer;" @click="handleDetails(record.userId)">{{ userName }}</span>
            </template>
            <template slot="dept" slot-scope="dept">
              {{ dept ? dept.deptName : '' }}
            </template>
            <template slot="posts" slot-scope="posts">
              <!-- {{ posts | showPosts }} -->
              {{posts[0].postName}}
            </template>
            <template slot="status" slot-scope="status, record">
              <a-switch :checked="record.status === '0'" checked-children="启用" un-checked-children="禁用"
                @change="handleChange(status,record)" />
            </template>
            <template slot="option" slot-scope="state, record">
              <a-button type="link" @click="handleUpdate(record.userId)">编辑</a-button>
              <a-button type="link" @click="handleDelete(record.userId)">删除</a-button>
              <a-button type="link" @click="handleEquipment(record.userId)">设备权限</a-button>
              <a-button type="link" @click="resetPassword(record.userId)">重置密码</a-button>
            </template>
          </a-table>

在这里插入图片描述

2. 更改后的代码

<a-table
            class="table"
            :columns="tableHead"
            rowKey="userId"
            :data-source="tableData"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
            @change="handleTableChange"
          >
            <template v-slot:bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex == 'userName'">
                <span
                  style="color: #1890ff; cursor: pointer"
                  @click="handleDetails(record.userId)"
                  >{{ record.userName }}</span
                >
              </template>
              <template v-if="column.dataIndex == 'dept'">
                {{ record.dept ? record.dept.deptName : "" }}
              </template>
              <template v-if="column.dataIndex == 'status'">
                <a-switch
                  :checked="record.status === '0'"
                  checked-children="启用"
                  un-checked-children="禁用"
                  @change="handleChange(record.status, record)"
                />
              </template>
              <template v-if="column.dataIndex == 'posts'">
                {{ record.posts ? record.posts[0].postName : "" }}
              </template>
              <template v-if="column.dataIndex == 'option'">
                <a-button type="link" @click="handleUpdate(record.userId)">编辑</a-button>
                <a-button type="link" @click="handleDelete(record.userId)">删除</a-button>
                <a-button type="link" @click="handleEquipment(record.userId)"
                  >设备权限</a-button
                >
                <a-button type="link" @click="resetPasswords(record.userId)"
                  >重置密码</a-button
                >
              </template>
            </template>
          </a-table>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11180.html
标签
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!