Vue2+ElementUI的el-table实现新增数据行与删除的功能

1. 代码

TableIndex.vue如下

<template><div><div><el-button @click="add" class="filter-item" plain type="primary">新增</el-button><el-button @click="batchDelete" class="filter-item" plain type="danger">删除</el-button></div><el-table :data="tableData.records" :key="tableKey" size="small"@selection-change="onSelectChange"border fit row-key="id" ref="table" style="width: 100%;" v-loading="loading"><el-table-column align="center" type="selection" width="40px" column-key="selectionId":reserve-selection="true"/><el-table-column v-if="false"><template slot-scope="scope"><el-input v-model="scope.row.id"></el-input></template></el-table-column><el-table-column label="标题"align="center" prop="blockTitle"width="300px"><template slot-scope="scope"><el-input v-model="scope.row.blockTitle"></el-input></template></el-table-column><el-table-column label="类型"align="center" prop="blockType"width="120px"><template slot-scope="scope"><el-select v-model="scope.row.blockType"><el-option label="表单" value="0"/><el-option label="表格" value="1"/><el-option label="树表" value="2"/><el-option label="甘特图" value="3"/></el-select></template></el-table-column><el-table-column label="数据源" :show-overflow-tooltip="true"align="center" prop="blockUrl"width=""><template slot-scope="scope"><el-input v-model="scope.row.blockUrl"></el-input></template></el-table-column><el-table-column label="是否有效"align="center" prop="izValidate"width="150px"><template slot-scope="scope"><el-radio v-model="scope.row.izValidate" label="1" default>是</el-radio><el-radio v-model="scope.row.izValidate" label="0">否</el-radio></template></el-table-column><el-table-column:label="$t('table.operation')" align="center" column-key="operation"class-name="small-padding fixed-width"width="100px"><template slot-scope="{ row }"><i @click="singleDelete(row)" class="el-icon-delete table-operation" title="删除" style="color: #f50;"/></template></el-table-column></el-table></div>
</template><script>
import elDragDialog from '@/directive/el-drag-dialog'
import {v4 as uuidv4} from 'uuid';export default {name: "TableIndex",directives: {elDragDialog},filters: {},data() {return {selections: [],tableData: {records: [],total: 0},tableKey: 0,loading: false,};},computed: {},watch: {},mounted() {},methods: {add() {// 添加新行this.tableData.records.push({id: uuidv4(), blockTitle: '', blockType: '', blockUrl: '', izValidate: '1'});},// 单行删除方法singleDelete(row) {console.log(row)this.tableRowsDelete(new Array(row.id))},//批量删除方法batchDelete() {if (!this.selections.length) {this.$message({message: "请先选择需要删除的数据",type: "warning"});return;}//获取要删除的记录idconst delIds = this.selections.map(row => row.id);this.tableRowsDelete(delIds)},// 删除表格数据行的方(用于单行及批量删除按钮操作)tableRowsDelete(delIds) {this.$confirm('此操作将永久删除, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//根据id删除this.tableData.records = this.tableData.records.filter(item => !delIds.includes(item.id));this.$refs.table.clearSelection();this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.clearSelections();this.$message({type: 'info',message: '已取消删除'});});},//当选择项发生变化时会触发该事件onSelectChange(selection) {this.selections = selection;},//清空表格选择clearSelections() {this.$refs.table.clearSelection();}}
};
</script>
<style lang="scss" scoped></style>

2. 效果

1. 新增按钮添加数据行

2. 删除按钮提示是否继续删除