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',[
h('Input',{
props: {
//将单元格的值给Input
value:params.row.numLots,},on:{
'on-change' (event) {
//值改变时
//将渲染后的值重新赋值给单元格值
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
},)
]);
}
},{
title: '操作',key: 'action',params) => {
return h('div',[
h('Button',{
props: {
type: 'error',size: 'default'
},style: {
marginRight: '5px'
},on: {
click: () => {
this.openDeleteDialog(params.index)
}
}
},'<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>')
]);
}
}
],data: [],}
}
}
这样就实现Input和Table单元格数据的双向绑定,取值是直接循环单元格来取值。
双向绑定数据的核心代码:
完成~
以上这篇VUE-Table上绑定Input通过render实现双向绑定数据的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文链接:https://www.f2er.com/vue/30711.html