element-puls 动态新增编辑表格

### Element Plus 中动态添加和编辑表格 为了实现在 `Element Plus` 中动态添加和编辑表格的功能，可以按照如下方法操作： #### 安装并配置 Element Plus 确保已经通过 npm 成功安装了 `element-plus` 并将其引入到项目中[^1]。 ```bash npm install element-plus ``` 在项目的入口文件 `main.js` 或者相应的模块化文件里注册 `element-plus`: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` #### 创建基础表格结构 定义一个简单的 Vue 组件来展示基本的表格布局。这里会涉及到两个主要的数据源：一个是用于存储表头信息 (`tableHeaders`)；另一个则是实际显示的内容列表(`tableData`)。 ```html <template> <div style="margin-top: 20px;"> <!-- 表格 --> <el-table :data="tableData" border stripe> <el-table-column v-for="(header, index) in tableHeaders" :key="index" :label="header.label" :prop="header.prop"> <template slot-scope="scope"> <span>{{ scope.row[header.prop] }}</span> </template> </el-table-column> <!-- 操作列 --> <el-table-column label="Operation" width="200"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">Delete</el-button> </template> </el-table-column> </el-table> <!-- 新增按钮 --> <el-button type="primary" plain @click="addRow">Add Row</el-button> <!-- 对话框组件 --> <el-dialog title="Edit Item" :visible.sync="dialogVisible"> <el-form ref="formRef" :model="editItem" label-width="80px"> <el-form-item v-for="(item, key) in editItem" :key="key" :label="getLabel(key)"> <el-input v-model="editItem[key]" /> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="cancelEdit">Cancel</el-button> <el-button type="primary" @click="confirmEdit">Confirm</el-button> </span> </el-dialog> </div> </template> ``` #### JavaScript逻辑处理 接下来编写对应的脚本部分，负责管理状态变化以及交互行为。 ```javascript <script> export default { data() { return { dialogVisible: false, currentIndex: null, tableHeaders: [ { prop: "name", label: "Name" }, { prop: "age", label: "Age" } ], tableData: [], editItem: {} }; }, methods: { addRow() { this.tableData.push({ name: '', age: '' }); }, handleEdit(index) { const row = Object.assign({}, this.tableData[index]); this.editItem = row; this.currentIndex = index; this.dialogVisible = true; }, cancelEdit() { this.dialogVisible = false; }, confirmEdit() { if (this.currentIndex !== null && this.tableData[this.currentIndex]) { let updatedRecord = {}; for(let k in this.editItem){ updatedRecord[k]=this.editItem[k]; } this.$set(this.tableData, this.currentIndex, updatedRecord); } this.dialogVisible = false; this.currentIndex = null; }, getLabel(prop) { const header = this.tableHeaders.find(h => h.prop === prop); return header ? header.label : ''; }, handleDelete(index) { this.tableData.splice(index, 1); } } }; </script> ``` 此代码片段展示了如何创建一个带有新增、删除功能的基础表格，并允许用户点击某一行进入编辑模式修改现有记录。当用户完成编辑后保存更改，则更新原位置上的数据项[^2]。