VUE-Table上绑定Input通过render实现双向绑定数据的示
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇VUE-Table上绑定Input通过render实现双向绑定数据的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
效果
HTML的Table
<Card>
<div ref="print" >
<Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table>
</div>
</Card>
JS代码
<script>
export default {
data () {
return {
columns7: [
{
title: '序号',
type: 'index',
width: 200
},
{
title: '新批次',
width: 350,
key:'newLots'
},
{
title: '数量',
key: 'numLots',
width: 350,
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',
width: 350,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'error',
size: 'default'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.openDeleteDialog(params.index)
}
}
}, '删除')
]);
}
}
],
data: [],
}
}
}
</script>
这样就实现Input和Table单元格数据的双向绑定，取值是直接循环单元格来取值。
双向绑定数据的核心代码：
on:{
'on-change' (event) {
//值改变时
//将渲染后的值重新赋值给单元格值
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
完成~
以上这篇VUE-Table上绑定Input通过render实现双向绑定数据的示例就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。