render函数实现表格数据绑定

上篇有说到实现表格的点击可输入功能,上篇用的是插槽的方式,插槽的方式其实是存在一定的缺陷的(上次那个插槽方式没法一次选择多个框)这次给大家分享一个小编特地加班加点学了下render,来给大家做个实用版的功能!

我的需求是这样的勾选前面的框对应框的当前行的交易面积要变成输入框,并且要实现输入框的双向绑定!

看代码:

<Table :width="contentWidth" :max-height="contentHeight-170" :columns="tableColumns" :data="tableData" @on-selection-change="selectRow">
</Table>

 selectRow(params) {    
            this.selectData =  params   
            let selectedTradableProject = {};
            for (let index = 0; index < params.length; index++) {
                selectedTradableProject = params[index];
            }
            this.selectedTradableProjects.push(selectedTradableProject);            
        },

{
                   title:'交易面积/公顷',
                   key: 'jymj',
                   minWidth:140,
                   render:(h,params)=>{
                       let num = 0
                       this.selectData.forEach(v=>{
                           if (v.id==params.row.id) {
                               num = 1
                           }
                       })                      
                       if (num == 1) {
                           return h('Input',{
                               props:{
                                   value:params.row.jymj
                               },
                               on:{
                                   "on-blur":(event) =>{
                                       params.row.jymj = event.target.value;
                                   }
                               }
                           }
                            
                       )
                       } else {
                           return h("div",params.row.jymj)
                       }
                       
                   }
                },