vue3可编辑的el-table表格

在Vue3中，可以使用`<el-table>`组件来实现可编辑的表格。具体步骤如下：

1. 安装`element-plus`组件库：在终端中运行以下命令来安装：

   npm install element-plus --save

2. 在Vue3的入口文件中引入`element-plus`组件库：

   import { createApp } from 'vue'
   import App from './App.vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'

   const app = createApp(App)
   app.use(ElementPlus)
   app.mount('#app')

3. 在需要使用可编辑表格的组件中，引入`<el-table>`组件，并设置`editable`属性为`true`：

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

   <script>
   export default {
     data() {
       return {
         tableData: [
           { name: '张三', age: 18, address: '北京市' },
           { name: '李四', age: 20, address: '上海市' },
           { name: '王五', age: 22, address: '广州市' }
         ]
       }
     }
   }
   </script>

上面的代码中，`tableData`数组中的数据是表格的数据源，`el-table-column`组件中的`prop`属性对应了`tableData`数组中的数据键名，`label`属性则是表格列的标题。

当`editable`属性为`true`时，表格的单元格可以进行编辑，用户可以直接在单元格中输入或修改数据，修改后的数据会自动同步到`tableData`数组中。