【Vue/element】 el-table实现表格动态新增/插入/删除 表格行，可编辑单元格

**Vue/Element 实现表格动态新增/插入/删除 表格行**

在实际的开发中，我们经常需要实现表格的动态增删改功能。这里我们将使用 Vue 和 Element UI 来实现这个需求。

### **一、准备工作**

首先，我们需要安装必要的依赖包：

bashnpm install element-ui vue

然后，创建一个新的 Vue项目，并在 `main.js` 中引入 Element UI：

javascriptimport Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
 render: h => h(App),
}).$mount('#app')

### **二、表格结构**

接下来，我们需要定义一个表格的结构。我们使用 `el-table` 组件来实现这个功能：

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <el-table-column type="selection" width="55"></el-table-column>
 <el-table-column prop="date" label="日期" width="180"></el-table-column>
 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 <el-table-column prop="address" label="地址" width="300"></el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { date: '2016-05-03', name: 'John Brown', address: 'New York No.1 Lake Park' },
 { date: '2016-05-02', name: 'Jim Green', address: 'London No.1 Lake Park' },
 { date: '2016-05-01', name: 'Joe Black', address: 'Sydney No.1 Lake Park' }
 ]
 }
 },
 methods: {
 handleSelectionChange(val) {
 console.log(val)
 }
 }
}
</script>

### **三、动态新增表格行**

现在，我们需要实现动态新增表格行的功能。我们可以使用 `el-table` 的 `append` 方法来实现这个需求：

javascriptmethods: {
 addRow() {
 this.tableData.push({
 date: '2022-01-01',
 name: '新添加的姓名',
 address: '新添加的地址'
 })
 }
}

然后，我们可以在 `template` 中使用一个按钮来触发这个方法：

html新增行

### **四、动态插入表格行**

接下来，我们需要实现动态插入表格行的功能。我们可以使用 `el-table` 的 `insertRow` 方法来实现这个需求：

javascriptmethods: {
 insertRow() {
 this.tableData.splice(1,0, {
 date: '2022-01-02',
 name: '新插入的姓名',
 address: '新插入的地址'
 })
 }
}

然后，我们可以在 `template` 中使用一个按钮来触发这个方法：

html插入行

### **五、动态删除表格行**

最后，我们需要实现动态删除表格行的功能。我们可以使用 `el-table` 的 `deleteRow` 方法来实现这个需求：

javascriptmethods: {
 deleteRow() {
 this.tableData.splice(1,1)
 }
}

然后，我们可以在 `template` 中使用一个按钮来触发这个方法：

html删除行

### **六、编辑单元格**

最后，我们需要实现编辑单元格的功能。我们可以使用 `el-table` 的 `editCell` 方法来实现这个需求：

javascriptmethods: {
 editCell(row, column) {
 this.$refs.editForm = row[column]
 }
}

然后，我们可以在 `template` 中使用一个按钮来触发这个方法：

html编辑

### **七、总结**

通过以上的步骤，我们已经实现了表格动态新增/插入/删除 表格行，可编辑单元格的功能。希望这个示例能够帮助你在实际开发中使用 Vue 和 Element UI 实现类似的需求。

**完整代码示例**

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <el-table-column type="selection" width="55"></el-table-column>
 <el-table-column prop="date" label="日期" width="180"></el-table-column>
 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 <el-table-column prop="address" label="地址" width="300"></el-table-column>
 </el-table>

 <el-button type="primary" @click="addRow">新增行</el-button>
 <el-button type="primary" @click="insertRow">插入行</el-button>
 <el-button type="primary" @click="deleteRow">删除行</el-button>
 <el-button type="primary" @click="editCell">编辑</el-button>

 <el-form ref="editForm" :model="editForm">
 <el-form-item label="日期">
 <el-input v-model="editForm.date"></el-input>
 </el-form-item>
 <el-form-item label="姓名">
 <el-input v-model="editForm.name"></el-input>
 </el-form-item>
 <el-form-item label="地址">
 <el-input v-model="editForm.address"></el-input>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 { date: '2016-05-03', name: 'John Brown', address: 'New York No.1 Lake Park' },
 { date: '2016-05-02', name: 'Jim Green', address: 'London No.1 Lake Park' },
 { date: '2016-05-01', name: 'Joe Black', address: 'Sydney No.1 Lake Park' }
 ],
 editForm: {}
 }
 },
 methods: {
 handleSelectionChange(val) {
 console.log(val)
 },
 addRow() {
 this.tableData.push({
 date: '2022-01-01',
 name: '新添加的姓名',
 address: '新添加的地址'
 })
 },
 insertRow() {
 this.tableData.splice(1,0, {
 date: '2022-01-02',
 name: '新插入的姓名',
 address: '新插入的地址'
 })
 },
 deleteRow() {
 this.tableData.splice(1,1)
 },
 editCell(row, column) {
 this.editForm = row[column]
 }
 }
}
</script>

**注意**

* 这个示例使用了 Element UI 的 `el-table` 组件来实现表格的动态增删改功能。
* 在这个示例中，我们使用了 `addRow`、`insertRow` 和 `deleteRow` 方法来实现表格行的新增、插入和删除功能。
* 我们还使用了 `editCell` 方法来实现单元格的编辑功能。
* 这个示例中的代码是完整的，可以直接在 Vue项目中使用。