Ant design vue 的table实现点击字段,直接在表格编辑功能(举个栗子)

大概需求:就点击table上某列的字段。然后即可在table上编辑数据。数据失去焦点后即可触发保存的事件。

关于无关紧要的代码,你可以不看,因为灭有用。看重点代码。

1.table中添加插槽名字如:

栗子:

重点位置:scopedSlots:{customRender:‘orderNum’}插槽名字orderNum

{title:'显示顺序',dataIndex: 'orderNum',scopedSlots: { customRender: 'orderNum' }},

2.在temlplment中添加插槽:

关键位置:重点在div-slot,这边的v-if是有数据就隐藏。通过给span点击事件直接把隐藏变成显示插槽。通过v-model动态绑定值这个你应该懂,@blur是焦点触发后调用的,往下看有写

 <div slot="orderNum" slot-scope="text,record,index">
          <a-input-number v-if="record.isEdit" v-model="record.orderNum" @blur="blurorderNum($event, record)"></a-input-number>
          <span v-else  @click="record.isEdit = true">{{text}}</span>
        </div>

3.@blur焦点消失触发:

 this.tHotApi.api,这个是调用保存的接口。你的接口和我的不一样,自己写就行。

重点在保存成功后一定要在调用一次获取列表的接口,我这边是写在getList方法。

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值