elementui 可编辑表格

element-ui 提供了 el-table 组件，可以通过设置 edit-config 属性来实现可编辑表格的功能。具体实现步骤如下：

1. 在 el-table 上设置 edit-config 属性，该属性是一个对象，包含了以下属性：
- `edit-method`：编辑行时触发的方法名
- `edit-trigger`：触发编辑的方式，可选值为 `click` 和 `dblclick`
- `edit-rules`：编辑校验规则，一个数组，每个元素是一个对象，包含了以下属性：
- `required`：是否必填
- `validator`：自定义校验方法
2. 在 el-table-column 上设置 prop 属性，该属性指定了该列对应数据的字段名。
3. 在 el-table-column 上设置 editable 属性，该属性指定了该列是否可编辑。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :edit-config="editConfig">
    <el-table-column prop="name" label="姓名" :editable="true"></el-table-column>
    <el-table-column prop="age" label="年龄" :editable="true"></el-table-column>
    <el-table-column prop="address" label="地址" :editable="true"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
      ],
      editConfig: {
        editMethod: 'handleEdit',
        editTrigger: 'click',
        editRules: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { required: true, message: '请输入地址', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleEdit(scope) {
      console.log('编辑行', scope.row);
    },
  },
};
</script>