elementui可编辑单元格_ElementUI 表格可编辑单元格

在 ElementUI 的表格中，可通过设置 `:editable="true"` 属性来开启表格的可编辑模式，并通过 `@cell-click` 事件来监听表格单元格的点击事件，从而进入编辑模式。同时，还可以通过 `:edit-rules` 属性来设置单元格编辑的规则，如必填项、数据格式等。

以下是一个简单的示例代码：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市朝阳区' },
        { name: '李四', age: 22, address: '上海市浦东新区' },
        { name: '王五', age: 30, address: '广州市天河区' },
      ],
    };
  },
};
</script>

在上面的代码中，通过设置 `:editable="true"` 开启表格的可编辑模式，并通过 `editable` 属性设置每一列都可以进行编辑。同时，还可以通过 `@cell-click` 事件监听单元格的点击事件，进入编辑模式。

如果需要对单元格的编辑进行规则限制，可以在 `el-table-column` 中设置 `:edit-rules` 属性，如下代码所示：

<el-table-column prop="name" label="姓名" editable :edit-rules="{ required: true }"></el-table-column>

在上面的代码中，通过设置 `:edit-rules="{ required: true }"` 来设置该列为必填项，如果该单元格为空，则无法保存编辑结果。