element ui 实现可编辑表格

 

 

 

 

 

     <el-table
          :data="powerMessageTableAll"
          border"
          @cell-click="cellclick"
        >
        

          <el-table-column  show-overflow-tooltip prop="" label="交易编码" width="120">
            <template slot-scope="scope">
              <el-input  ref="gain" size="mini" v-if="scope.row.isOK" @keyup.native.enter="blurClick(scope)" @blur="blurClick(scope)" v-model="scope.row.planCode" style="width:100%;hight:100%"></el-input>
              <span size="mini" v-else>{{scope.row.planCode}}</span>
            </template>
          </el-table-column>
     

        </el-table>


      cellclick(row, column, cell, event){
        if(column.label === '交易编码'){
          this.$set(row, 'isOK', true)
        }
        if(column.label === '交易名称'){
          this.$set(row, 'isOK2', true)
        }
        this.$nextTick(() => {
          this.$refs.gain.focus()
        })
      },
      blurClick({row,column}){
        if(column.label === '交易编码'){
          this.$set(row, 'isOK', false)
        }
        if(column.label === '交易名称'){
          this.$set(row, 'isOK2', false)
        }
      },