使用ant-design-vue的madal在table中，只能点击一次，并且会报错Avoid mutating a prop directly since...

最新推荐文章于 2024-09-18 15:40:53 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-09-18 15:40:53 发布

阅读量1.2k

点赞数

分类专栏： Vue日常总结文章标签： node.js 前端后端

本文链接：https://blog.csdn.net/qq_41880073/article/details/123323351

版权

本文描述了在使用Ant Design Vue时，遇到Table中Modal只能点击一次并报错的问题。作者最初尝试通过props传递状态来控制Modal显示，但遇到了第二次点击无法弹出Modal的错误。解决方案是改用ref直接操作子组件来控制Modal的显示隐藏，从而避免了直接修改prop导致的错误。

摘要由CSDN通过智能技术生成

使用ant-design-vue的madal在table中，只能点击一次，并且会报错

一、问题描述
二、解决办法

一、问题描述

最近学习过程中遇到这样一个问题。我想实现点击表格的每一行的修改按钮，都弹出一个modal框。

最初的思路（注意：之前用element-ui这么做没问题），封装一个modal组件，然后在父组件进行引入，当点击修改按钮的时候，改变显示与否的状态，并且传给modal子组件，子组件通过props接收。

但问题来了，点击第一次，可以正常弹出并且关闭，点击第二次modal框不弹了，并且始终报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “visible”

看一个大概示例
父组件

<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="userData"
      bordered
      rowKey="_id"
      size="small"
      :pagination="false"
    >
      <span slot="roleTags" slot-scope="roleTags">
        <a-tag color="blue">{
   {
    roleTags}}</a-tag>
      </span>
      <span slot="jobTags" slot-scope="jobTags">
        <a-tag color="green">{
   {
    jobTags}}</a-tag>
      </span>
      <span slot="action" slot-scope="userInfo">
        <a-button type="link" @click="showUpdateModal">修改</a-button>

        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="sureDelete(userInfo)"
          @cancel="cancelDelete"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>

    <div class="pagination">
      <a-pagination
        size="small"
        :total="this.total"
        show-size-changer
        show-quick-jumper
        :defaultPageSize="this.pageSize"
        :pageSizeOptions="['2','5','10','15']"
        :show-total="total => `共${this.total}条`"
        @change="currentSizeData"
        @showSizeChange="changeSize"
      />
    </div>
    <UpdateUser :updateUserModal="updateUserModal" />
  </div>
</template>

<script>
import {
    getAllUser, getRoleId, deleteUser } from '@/network/user.js'
import {
    formateDate } from '@/utils/dateUtils.js'

import UpdateUser from './UpdateUser'

const columns = [
  {
   
    title: '用户名',
    dataIndex: 'username',
    align: 'center',
  },
  {
   
    title: '邮箱',
    dataIndex: 'email',
    align: 'center',
  },
  {
   
    title: '联系方式',
    dataIndex: 'phone',
    align: 'center',
  },
  {
   
    title: '所属角色',
    align: 'center',
    dataIndex: 'roleName',
    scopedSlots: {
    customRender: 'roleTags' },
  },
  {
   
    title: '职称',
    align: 'center',
    dataIndex: 'job',
    scopedSlots: {
    customRender: 'jobTags' },