VueJS Element-UI 表格操作：动态添加、删除行及批量删除

本文主要介绍如何在Vue.js与Element UI框架下实现表格的动态添加、修改、单独删除以及批量删除行的操作。 在Vue.js中，Element UI是一个常用的UI组件库，它提供了丰富的组件来帮助开发者构建用户界面。在这个场景中，我们将关注如何使用Element UI的`el-table`组件进行数据操作。 首先，我们需要在模板中设置基本的结构。在给出的代码片段中，我们看到了两个`el-button`元素，分别用于添加行和保存数据。`el-table`组件绑定了`tableData`数据，这是用来存储表格数据的数组。 ```html <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="width:100%"> <!-- 表格列定义 --> </el-table> </div> </template> ``` `el-table-column`用于定义表格的列，这里展示了四个列：书名（bookname）、册数（bookvolume）、购买者（bookbuyer）和借阅者（bookborrower）。每个列都包含一个`el-input`元素，允许用户对数据进行编辑。 ```html <el-table-column prop="bookname" label="书名"> <template slot-scope="scope"> <el-input v-model="scope.row.bookname" placeholder="书名"></el-input> </template> </el-table-column> <!-- 其他列定义 --> ``` `v-model`是Vue.js中的双向数据绑定，将输入框的值与当前行的数据进行绑定。`scope.row`代表当前行的数据对象。 接下来，我们要实现动态添加行的功能。在Vue.js的methods里，创建一个`addLine`方法，向`tableData`数组中添加一个新的空对象或预设初始值： ```javascript methods: { addLine() { this.tableData.push({ bookname: '', bookvolume: '', bookbuyer: '', bookborrower: '', bookbuytime: '' }); }, // 保存和删除方法将在后面讲解 } ``` 对于单独删除行，可以添加一个`handleDelete`方法，接收当前行的索引作为参数，并从数组中移除该行： ```javascript methods: { handleDelete(index) { this.tableData.splice(index, 1); }, // ... } ``` 在表格每一行的末尾添加一个删除按钮，通过`@click`事件调用`handleDelete`方法： ```html <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="handleDelete(scope.$index)">删除</el-button> </template> </el-table-column> ``` 批量删除行通常涉及一个复选框和一个确认删除的按钮。在表格的每一行添加一个`el-checkbox`，并创建一个`selectAll`和`deleteSelected`方法： ```html <el-table-column type="selection"></el-table-column> <el-button @click="deleteSelected">批量删除</el-button> ``` ```javascript data() { return { selectedRows: [], // 用于存储选中的行 // ... }; }, methods: { deleteSelected() { this.selectedRows.forEach(index => { this.tableData.splice(index, 1); }); this.selectedRows = []; // 清空选中项 }, // ... } ``` 在表格上绑定`@selection-change`事件，记录选中的行索引： ```html <el-table :data="tableData" @selection-change="handleSelectionChange"> ``` 在`handleSelectionChange`方法中，更新`selectedRows`： ```javascript methods: { handleSelectionChange(val) { this.selectedRows = val.map(item => item.$index); }, // ... } ``` 至此，我们已经实现了Vue.js与Element UI中表格的动态添加、修改、单独删除和批量删除行的基本功能。实际开发中，可能还需要处理数据验证、异步操作等复杂情况，但这些基础操作提供了一个良好的起点。