在element的表格上點擊對應格變爲input進行編輯

實現原理就是監聽雙擊事件把對應格的span改成input就行,失去焦點保存。

一、在須要編輯的列上添加兩種標籤

這裏使用的是isEdit數組，對應儲存這一列每一個格的編輯狀態

<el-table-column header-align='center' label="實際投入人數" width="140">
  <template slot-scope="{row}">
    <span v-if="!isEdit[row.index]">{{row.biz_real_person_count}}</span>
    <el-input v-if="isEdit[row.index]" @blur="saveEdit(row)" v-model="row.biz_real_person_count" placeholder="請輸入內容"></el-input>
  </template>
</el-table-column>
複製代碼

二、在表格上註冊雙擊事件

<el-table :data="data" border  @cell-dblclick="rowDblclick">
       ·····
</el-table>
複製代碼

三、更改對應格子的isEdit（注意這裏要使用set方法更新數組才能出發數組的更新不然沒有效果）

在method中的代碼

rowDblclick(row, column, cell, event) {
      //判斷是不是須要編輯的列 再改變對應的值
      if(column.label == '實際投入人數') {
        /*第一個參數是你要改變的數組， 
          第二個參數是你要改變數組中對應值的索引，
          第三個參數是你要將這個值改爲什麼*/
        this.$set(this.isEdit, row.index, true)
      }
    }
複製代碼

四、保存方法

saveEdit(row) {
        this.$set(this.isEdit, row.index, false)
          ··········
    },
複製代碼