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)
                       }
                       
                   }
                },
公開された34元の記事 ウォンの賞賛0 ビュー3634

おすすめ

転載: blog.csdn.net/qq_43469899/article/details/103727342