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

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 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题
  • ¥15 手机应用的时间可以修改吗
  • ¥15 docker 运行OPEN-webui异常
  • ¥15 麒麟系统如何删除光盘刻录痕迹
  • ¥15 recipe通过gem协议传的是什么
  • ¥15 TS2307: Cannot find module 'cc'.
  • ¥15 100小时学会sap 书上pp章节5.22,标准成本计算逻辑?