問題:在如下表格中使用InputNumber須要進行雙向數據綁定,可是動態生成的InputNumber輸入框組件沒法綁定v-model,能夠經過render函數進行雙向數據綁定。template部分
dom
<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事件
------數值改變時的回調,返回當前值this