Vue+Elmement点击表格可编辑

<el-table-column align="center" prop="type" label="制造商型号" >
    <template slot-scope="scope">
      <div @click="cellClick(scope.$index,'type')" @mouseout="reback">
         <el-input size="small" v-model="scope.row.type" v-if="scope.$index == pos && prop == 'type'"></el-input>
         <span v-else> {{scope.row.type}} </span>
      </div>
    </template>
  </el-table-column>

• 定义变量

pos = -1; //记录表格位置
prop = ''; //记录表格prop

• 定义方法

//点击单元格
 cellClick(index,prop){
   this.pos = index;
   this.prop = prop;
 }
 //单元格复原
 reback(){
   this.prop = '';
 }

效果