elementUI table 让某一行 变成可编辑状态

首先，利用自带的

slot-scope="scope"

使用方法

scope.$index

<el-table-column prop="number" label="数量" align="left">
  <template slot-scope="scope">
    <el-input v-model="editNumber" clearable v-show="scope.$index == cellIndex" />
    <p v-show="scope.$index != cellIndex">{{ scope.row.number }}</p>
  </template>
</el-table-column>

解释一下

这里拿到每一行的index----------scope.$index

这里拿到每一行的数据-----------scope.$row

在data()里面写一个cellIndex = null

 data() {
    return {
      tableData: [ ],
      //当前点击行的下标
      cellIndex: null
    };
  },
————————————————

<el-table-column label="操作" align="left" width="120">
  <template scope="scope">
      <el-button @click="editTable(scope)" size="small" type="text" v-if="scope.$index != cellIndex">编辑</el-button>
      <el-button @click="saveTable(scope)" size="small" type="text" v-else>保存</el-button>
      <el-button type="text" size="small" @click="partsDel(scope.row.id)">删除</el-button>
    </div>
    <div v-else>
      <span>-</span>
    </div>
  </template>
</el-table-column>

然后在方法中写

editTable({ $index, row }) {
  // 获取当前点击行下标
  console.log($index，row)
  this.cellIndex = $index
},
saveTable({ row }) {
  this.cellIndex = null
}