sdgpsaf 2022-02-16 08:30 采纳率: 85.7%
浏览 157
已结题

vue表格内双向绑定问题,失去焦点表格内数据不显示

问题遇到的现象和发生背景

在一个有编辑功能的vue表格内,动态绑定一组属性,在编辑完成后,表格不正常显示数据

问题相关代码,请勿粘贴截图
      <vxe-column field="name" title="Name" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.name" type="text"></vxe-input>
        </template>
      </vxe-column>

上面这部分是写属性写死的案例,编辑后正常显示

      <vxe-column
        v-for="(item, index) in tableData"
        :key="item.index"
        :filed="item.name"
        :title="item.nickname"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <vxe-input
            :key="index"
            :placeholder="item.address"
            v-model="row[item.name]"
            :type="item.C_Type"
          ></vxe-input>
        </template>
      </vxe-column>

这个是动态绑定的属性,为什么编辑之后鼠标失去焦点编辑后的数据就消失了

运行结果及报错内容

img

img

上面两个是属性写死的案例

img

img

这两个是动态绑定属性的结果

请帮忙指出问题在哪,应该怎么正常显示

  • 写回答

1条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-02-16 09:00
    关注

    v-model 拆成 :value="row[item.name]" @change="change($event,row,item.name)"

    change(event,row,name){
    row[name] = event.target.value
    this.$forceUpdate()
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 2月25日
  • 已采纳回答 2月17日
  • 创建了问题 2月16日

悬赏问题

  • ¥15 麒麟V10桌面版SP1如何配置bonding
  • ¥15 Marscode IDE 如何预览新建的 HTML 文件
  • ¥15 K8S部署二进制集群过程中calico一直报错
  • ¥15 java python或者任何一种编程语言复刻一个网页
  • ¥20 如何通过代码传输视频到亚马逊平台
  • ¥15 php查询mysql数据库并显示至下拉列表中
  • ¥15 freertos下使用外部中断失效
  • ¥15 输入的char字符转为int类型,不是对应的ascall码,如何才能使之转换为对应ascall码?或者使输入的char字符可以正常与其他字符比较?
  • ¥15 devserver配置完 启动服务 无法访问static上的资源
  • ¥15 解决websocket跟c#客户端通信