el-table 簡單編輯功能

效果圖

得到的表格數據展現

第一步：表格數據處理。
將每行數據都添加屬性editAble，
每一個0與當前行每一列對應；經過修改對應的editAble[i]的值控制編輯可能，0不可編輯，1可編輯

data.listRemain.forEach( (row,index) => {
       //editAble 數組長度=表格列數
      //可new一個數組，使用editAble.fill(0)填充0，
      row.editAble = [0,0,0,0,0,0,0,0,0];
    });

第二步：el-table 列的scope處理。
這裏是金額列的編輯，因此使用了el-input-number ，可根據須要換成el-input。

<el-table
    :data="listRemain"
    highlight-current-row>
     <el-table-column
      label="年初餘額"
      show-overflow-tooltip>
       <template slot-scope="scope">
       
              <el-input-number  
                clearable
                :precision="2" //小數位精度
                :controls="false" 
                v-model="scope.row.balance" 
                :key="scope.row.chr_id" 
              //根據editAble ，判斷是否顯示編輯框，edit[0]=1時顯示，0是列的index,從0開始
                v-if="(scope.row.editAble || [])[0]"
                v-focus//獲取焦點，若不生效可改成v-el-focus,定義方法見文章最後「其餘」
                @focus="$event.target.select()"
                @blur="getValue(scope.row, 0,'balance')">
              </el-input-number>
              
              <div class="" 
                   v-else //editAble[0]=0時編輯框隱藏
                  //雙擊單元格，將單元格對應列的editAble[0]的值改成1，則編輯框el-input-number 便可顯示
                   @dblclick="cellClick(scope.row, 0, 'balance')">
                    //formatMoney是金額格式化方法
                    {{ scope.row.balance | formatMoney(scope.row.balance,0) }}
              </div>
              
       </template>
    </el-table-column>
  </el-table>

第三步：相關js方法

<script>
 export default {
        data(){
            return{
              listRemain:[],
            }
        },
        directives: {
            focus: {// v-focus指令的定義
              inserted: function (el) {
                  $(el).find('input').focus()
              }
            }
        },
        methods:{
            //編輯事件（雙擊觸發）
           cellClick(row, index,prop){
              this.inputAbstract(row.editAble,index)
            },
            //將對應列的editAble[index]值改成1
            inputAbstract(editAble, index) {
                editAble.splice(index, 1, 1)
            },
           // 隱藏編輯框
            getValue(row, index,prop) { 
                var vm = this;
                setTimeout(vm => {
                     //將對應列的editAble[index]值改成0
                    row.editAble.splice(index, 1, 0);
                }, 150)
          },
        }
}
</script>

其餘種類編輯示例：
動態列
input帶按鈕,可進行點擊按鈕跳出選擇模態框樹等操做

<el-table-column  
                          v-for="(col,index) in detailTableHead"  
                          :key='col.prop'  
                          :prop="col.prop"  
                          :label="col.label"  >
            <template slot-scope="scope">

              <!-- 基本要素 -->
              <el-input
                    v-focus
                    :trigger-on-focus=false
                    v-if="(scope.row.editAble || [])[index] " 
                    v-model="scope.row[col.prop]"  
                    @blur="getValue(scope.row, index, col.prop)">
                    <el-button slot="append"  icon="el-icon-more" @click="getEle(col)"></el-button>
              </el-input>

              <!-- 不可編輯 要素 -->
              <div  class="text-show" 
                    v-else 
                    v-text="scope.row[col.prop]"
                    @dblclick="cellClick(scope.row, index, col.prop)">
              </div>
            </template>
        </el-table-column>

其餘：

import Vue from 'vue'
// 註冊一個全局自定義指令 `v-el-focus`, 用於element-ui input聚焦，可寫在main.js裏
Vue.directive('el-focus', {
  inserted: function(el) {
    // 聚焦元素
    Vue.nextTick(function() {
      el.getElementsByTagName('input')[0].focus()
    })
  }