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) } },