VUE-Table上綁定Input通過render實現雙向綁定數據的示例

<Card>
 <div ref="print" >
 <Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table>
 </div>
</Card>

<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>

on:{
 'on-change' (event) { 
 //值改變時 
 //將渲染后的值重新賦值給單元格值 
 params.row.numLots = event.target.value;
 vm.data[params.index] = params.row;
 } 
 }