VUE-Table上绑定Input通过render实现双向绑定数据的示例

前端之家收集整理的这篇文章主要介绍了VUE-Table上绑定Input通过render实现双向绑定数据的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果

HTML的Table

JS代码

export default { data () { return { columns7: [ { title: '序号',type: 'index',width: 200 },{ title: '新批次',width: 350,key:'newLots' },{ title: '数量',key: 'numLots',align: 'center',render: (h,params) => { var vm = this; return h('div',[
  1. h('Input',{
  2. props: {
  3. //将单元格的值给Input
  4. value:params.row.numLots,},on:{
  5. 'on-change' (event) {
  6. //值改变时
  7. //将渲染后的值重新赋值给单元格值
  8. params.row.numLots = event.target.value;
  9. vm.data[params.index] = params.row;
  10. }
  11. }
  12. },)
  13. ]);
  14. }
  15. },{
  16. title: '操作',key: 'action',params) => {
  17. return h('div',[
  18. h('Button',{
  19. props: {
  20. type: 'error',size: 'default'
  21. },style: {
  22. marginRight: '5px'
  23. },on: {
  24. click: () => {
  25. this.openDeleteDialog(params.index)
  26. }
  27. }
  28. },'<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>')
  29. ]);
  30. }
  31. }
  32. ],data: [],}
  33. }

}

这样就实现Input和Table单元格数据的双向绑定,取值是直接循环单元格来取值。

双向绑定数据的核心代码

完成~

以上这篇VUE-Table上绑定Input通过render实现双向绑定数据的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的Vue相关文章