el-table编辑单元格

el-table是一个基于element-ui的表格组件。编辑单元格的操作需要使用到el-table的slot和scoped-slot属性。

首先，在el-table中定义一个slot，用来渲染需要编辑的单元格。例如，可以在表格的第二列中添加一个可编辑的单元格：

<el-table-column label="姓名">
  <template slot-scope="scope">
    <span>{{ scope.row.name }}</span>
  </template>
</el-table-column>

<el-table-column label="年龄">
  <template slot-scope="scope">
    <span class="editable-cell">{{ scope.row.age }}</span>
  </template>
</el-table-column>

在第二列中，我们使用了一个class为editable-cell的span元素来渲染需要编辑的单元格。

接下来，我们需要定义一个scoped-slot，用来渲染编辑单元格时的弹出框。例如，我们可以使用el-dialog组件来实现弹出框的效果：

<el-table-column label="年龄">
  <template slot-scope="scope">
    <span class="editable-cell" @click="editCell(scope.row, 'age')">{{ scope.row.age }}</span>
    <el-dialog :visible.sync="dialogVisible">
      <el-input v-model="editValue"></el-input>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit()">保存</el-button>
      </div>
    </el-dialog>
  </template>
</el-table-column>

在这里，我们为editable-cell元素添加了一个@click事件，当单元格被点击时，会触发editCell方法。该方法会设置dialogVisible为true，显示el-dialog组件。el-dialog中包含一个el-input用来输入编辑后的值，以及一个保存和取消按钮。

在methods中定义editCell、saveEdit方法：

methods: {
  editCell(row, prop) {
    this.editRow = row
    this.editProp = prop
    this.editValue = row[prop]
    this.dialogVisible = true
  },
  saveEdit() {
    this.dialogVisible = false
    this.editRow[this.editProp] = this.editValue
  }
}

在editCell方法中，我们记录当前需要编辑的行和属性，以及设置编辑框的值和可见性。在saveEdit方法中，我们将编辑后的值保存到数据源中，并将编辑框隐藏。

最后，为了让用户知道哪些单元格可以编辑，我们可以使用CSS样式来为编辑单元格添加一个边框或者背景色：

.editable-cell {
  cursor: pointer;
  border: 1px dashed #ccc;
  padding: 2px 6px;
  display: inline-block;
}