《elementui增删_elementui批量删除》

解决方案简述

在Element UI中实现增删和批量删除功能，主要是借助其提供的表格组件（el-table）、按钮组件（el-button）等，并结合Vue.js的数据驱动特性。通过为表格添加选择框来实现多选，再通过点击批量删除按钮触发删除逻辑，对于单个的增删操作则可直接关联对应的方法。

思路一：使用el - table - selection实现批量删除

在页面中创建一个表格，包含数据列以及选择框。

html

    <div>
        <!-- 表格 -->
        
            
            
            
            
                
                    删除
                
            
        
        <!-- 批量删除按钮 -->
        批量删除
    </div>
</p>


export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 20 },
                { name: '李四', age: 22 },
                { name: '王五', age: 25 }
            ],
            multipleSelection: []
        };
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        batchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '请先选择要删除的项',
                    type: 'warning'
                });
                return;
            }
            // 这里可以调用接口删除数据，此处模拟删除
            this.multipleSelection.forEach(item => {
                const index = this.tableData.indexOf(item);
                if (index > -1) {
                    this.tableData.splice(index, 1);
                }
            });
            this.$message({
                message: '删除成功',
                type: 'success'
            });
        },
        deleteSingle(row) {
            const index = this.tableData.indexOf(row);
            if (index > -1) {
                this.tableData.splice(index, 1);
            }
            this.$message({
                message: '删除成功',
                type: 'success'
            });
        }
    }
};


<p>

思路二：自定义复选框样式与逻辑处理

如果想要对选择框进行更个性化的定制，可以不直接使用el - table - column的type为“selection”的方式，而是自己在表格列中添加复选框组件（如el - checkbox），然后手动维护选中的状态。

html

    <div>
        <!-- 表格 -->
        
            
                
                    
                    
                
            
            
            
            
                
                    删除
                
            
        
        <!-- 批量删除按钮 -->
        批量删除
    </div>
</p>


export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 20, checked: false },
                { name: '李四', age: 22, checked: false },
                { name: '王五', age: 25, checked: false }
            ]
        };
    },
    methods: {
        checkboxChange(row) {
            // 根据需求可以在这里做额外逻辑处理
        },
        batchDelete() {
            let toBeDeleted = this.tableData.filter(item => item.checked);
            if (toBeDeleted.length === 0) {
                this.$message({
                    message: '请先选择要删除的项',
                    type: 'warning'
                });
                return;
            }
            // 模拟删除
            toBeDeleted.forEach(item => {
                const index = this.tableData.indexOf(item);
                if (index > -1) {
                    this.tableData.splice(index, 1);
                }
            });
            this.$message({
                message: '删除成功',
                type: 'success'
            });
        },
        deleteSingle(row) {
            const index = this.tableData.indexOf(row);
            if (index > -1) {
                this.tableData.splice(index, 1);
            }
            this.$message({
                message: '删除成功',
                type: 'success'
            });
        }
    }
};


<p>

这两种思路都能很好地实现Element UI中的增删和批量删除功能，可以根据实际项目的需求和风格来进行选择。