共计 729 个字符,预计需要花费 2 分钟才能阅读完成。
问题:在以下表格中使用 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 事件
—— 数值改变时的回调,返回当前值
正文完