Vue + ElementUI 实现批量删除功能

Posted 2021-09-23 在奋斗的大道

第一步：在el-table 组件绑定 @selection-change事件

 第二步：在调用父组件的子组件中添加当表格项发生变化时会触发事件函数:selectionChange(val)

在method 函数中添加如下代码:

  selectionChange(val) {
            // 表格选项发生变化
            console.log("触发表格事件")
            
            this.selectionList = []
		    val.forEach(element => {
		        this.selectionList.push(element.id)
		    });
          
        },

补充说明:在Vue 实例data 定义selectionList 属性

 data () {
        return {
            tableData: [],
            loading: false,
            tableRef: 'tableRef',
            searchForm: {},
            currentPage: 1,
            pageSizes: [10, 20, 50],
            pageSize: 10,
            total: 0,
            selectionList:[], //定义删除/批量删除
        };
    },

第三步：定义删除/批量删除按钮，并绑定相关函数方法

  <template v-slot:actions>
                <el-button size="small" type="primary">新 建</el-button>
                <el-button size="small" type="primary">编 辑</el-button>
                <el-button size="small" type="primary" v-on:click="handlerDelete()">删除/批量删除</el-button>
                <el-button size="small" type="primary">批量导出</el-button>
            </template>

在meothod 中定义handlerDelete函数

  handlerDelete(){
              // 数组转字符串使用逗号分隔
            let sids =  this.selectionList.join(",")
            var params ={
                'sids': sids
            }
            // 执行后台批量删除接口
            batchDelete(params).then(res =>{
                Message({
                    message: '批量删除成功',
                    type: 'success',
                    duration: 3 * 1000
                })
                // 重新查询表格
                this.query()
            }).catch((error) => {
             console.log(error)
            })
            
        },

效果展示: