问题:在以下表格中使用InputNumber需要进行双向数据绑定,但是动态生成的InputNumber输入框组件无法绑定v-model,可以通过render函数进行双向数据绑定。
template部分
<Table
border
stripe
:columns="addTable"
:data="addTableData"
>
<!-- 表格中单价 -->
<template slot-scope="{}" slot="price">
<FormItem prop="price" >
<InputNumber size="small" ></InputNumber>
</FormItem>
</template>
<!-- 表格中数量 -->
<template slot-scope="{}" slot="count">
<FormItem prop="count" >
<InputNumber size="small" ></InputNumber>
</FormItem>
</template>
</Table>
script部分
export default {
data() {
return {
addTable: [
{
title:'单价',
key:'price',
slot:"price",
render:(h,params)=>{
return h('div',[
h('InputNumber',{
props:{
min:1,
value:this.price
},
domProps:{
value:this.price
},
on:{
'on-change':(event)=>{
this.price = event
}
},
style:{
width:"50px"
}
})
])
}
}
]
}
}
}
on-change事件
------数值改变时的回调,返回当前值