el-table单个点击可编辑

在el-table中，单个点击可编辑可以通过设置el-table-column的prop属性为可编辑的字段名，同时设置editable属性为true实现。代码示例如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" editable></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

同时，在el-table中需要监听cell-click事件，用于判断点击的单元格是否可编辑。代码示例如下：

<el-table :data="tableData" @cell-click="handleCellClick">
  <el-table-column prop="name" label="姓名" editable></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' },
      ],
      editingRow: null,  // 记录正在编辑的行
    }
  },
  methods: {
    handleCellClick(row, column, event) {
      if (column.editable) {
        this.editingRow = row
      }
    },
  },
}

最后，需要在可编辑的el-table-column中设置scoped-slot，用于渲染编辑状态下的单元格。代码示例如下：

<el-table :data="tableData" @cell-click="handleCellClick">
  <el-table-column prop="name" label="姓名" editable>
    <template slot-scope="{ row }">
      <el-input v-model="row.name" size="mini"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

此时，当用户点击可编辑的单元格时，单元格会进入编辑状态，用户可以直接在单元格中编辑内容。并且，el-table会自动更新数据源中对应的值。