Vue项目 使用iView 通过render函数 实现 InputNumber 的双向数据绑定
问题:在以下表格中使用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事件
------数值改变时的回调,返回当前值
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21