ant-vue：a-table-行內編輯提交和上傳后端並實現無刷新數據（仿刷新數據）提交完刷新編輯單元格內容

需求很簡單，在a-table指定項添加在線編輯提交功能

添加后點擊可編輯信息，編輯提交后顯示在頁面上

正常應該是點擊提交后刷新數據重新渲染，這里直接更改綁定，沒必要每次提交一個表單都要重新渲染下頁面

代碼：

         <a-table 
         :columns="columns"
         :data-source="table1" 
         size="small"
         bordered  
         :pagination="pagination"
         :rowClassName = "fnRowClass"
         :showHeader = "false"
         >
 
             <!-- 插槽 -下載圖紙-->
               <div slot="tags" slot-scope="text, record, index" class="searchlist">
                   <template v-if='record.tags.length<1'>
                      <!-- record.tags： {{record.tags}} -->
                       <a-spin></a-spin>
                   </template>
                   <template>
                        <!-- record.tags： {{record.tags}} -->
                       <div v-if="record.tags == '查詢無結果'">
                        無
                       </div>
                       <div v-else v-for="tag in record.tags">
                              <!-- <a style="color:#1888ff" :href="tag.file_url" title="點擊下載圖標料號">{{tag.filename}}</a><br/> -->
                           <div v-if="tag.status=='已發布'">
                               <span style="color:#0db442;">[ {{tag.status}} ]:</span>  <a style="color:red;border-bottom:1px solid #e80509;" @click="fnTagAHref(tag,record)" href="javascript:;" :title="tag.filename">{{tag.filename}}</a>
                           </div>
                           <div v-else>
                             <span  style="color:#964551;"> [  {{tag.status}} ]:</span> <a style="color:#964551;" :title="tag.filename">{{tag.filename}}</a>
                           </div>
                           <br/>
                       </div>
                   </template>
               </div>
               <!-- 插槽-備注填寫 -->
                <div slot="beizhu" slot-scope="beizhu" class="searchlist">beizhu</div>
                <!-- 可編輯列 -->
                    <template slot="beizhu" slot-scope="text, record, index">
                      <div class="editable-row-operations">
                      
                        <span v-if="!record.isEdit">
                            <p :title='record.beizhu' style="width:100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> {{record.beizhu}}</p>
                            <a-button size='small' @click="fnHandlerEdit(record.key)" style="float: right;">添加備注</a-button>
                        </span>
                        <span v-else>
                          <a-input style="width: 180px;margin-right:20px;" :placeholder='record.beizhu?record.beizhu:""' v-model="record.inpValue" type="text" @change="edit(text, record, index)" />

　　　　　　　　　　　　　　　　　　<p style="text-align: right;padding-top:10px;">
　　　　　　　　　　　　　　　　　　　　<a @click="submit(text, record, index)">提交</a>
　　　　　　　　　　　　　　　　　　　　<a @click="cancel(text, record, index)">取消</a>
　　　　　　　　　　　　　　　　　　</p>

                        </span>
                      </div>
                    </template>
               
             
         </a-table>

:placeholder='record.beizhu?record.beizhu:""':可以在點擊輸入框顯示輸入框時候就同步已編寫數據

v-model="record.inpValue" ：這里動態綁定每一項傳入項數據的inpvalue 以便獲取每項輸入框的值

@change="edit(text, record, index)"：這里監測沒輸入值的事件，這里暫時不用

js

 

submit(text, record, index) {//提交備注
this.data.map((v,k)=>{
            if(v.key==record.key){//找到這項
                v.isEdit = false //隱藏本項可編輯控件inp// 發送到后端
                if(!record.inpValue) return
                let uid = record.uid
                let remark = record.inpValue
                let username = 'aaa'
                let url = this.baseurl+ 'j********?pid='+uid+'&remark='+remark+'&username='+username
                this.$http.get(url).then((res)=>{
                    
                    if(!res) return
                    if(res.data!==1) return this.$message.warning('失敗!')
                    this.$message.info('提交成功!')
                    // this.fngetdate() --更新后刷新數據太多耗內存 改單頁模擬
                    record.beizhu = record.inpValue //只需要更改綁定頁面用到的鍵的數據的值即可同步頁面而不必重新渲染整個表單--這里只更改所更改的項
                })
            }
        })  

 cancel(text, record, index){//取消編輯
          this.data.map((v)=>{
              if(v.key==record.key){
                  v.isEdit = false
              }
          })
      },

 

注意：要在獲取數據時-第一次操作重組自己數據格式時添加這幾項：

this.data.push({

...

isEdit:false,//顯示可否編輯 //--初始化數據時就要添加上,不然頁面不會根據值的改變重繪數據頁面
beizhu:v[6],//備注信息
inpValue:null,//輸入備注的信息

})