el-table 多选 单选功能

1.常见的el-table多选删除功能:

 

js: 将选择的id保存在一个数组里面,可以使用forEach或者map(map可以直接返回一个数组,较为方便)

 // 表格复选框 数据
        handleSelectionChange(val) {
            this.changArr = []
            val.forEach((item) => {
                this.changArr.push(item.idBq)
            })
        },

然后就是删除操作:

 // 批量删除
        deleteDatafile() {
            if (this.changArr.length > 0) {
                this.$confirm('此操作将永久批量删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        removeTag({
                            idbqs: this.changArr,
                        }).then((res) => {
                            if (res && res.data.data) {
                                this.$message.success('删除成功')
                                this.queryData()
                            }
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除',
                        })
                    })
            }
        },

2.单选删除:直接使用 @select="select",在这个方法里面将数据前面的复选框回显上

 

js部分:

// 单选
        select(selection, row) {
            if (selection.length > 1) {
                let del_row = selection.shift()
                this.$refs.table.toggleRowSelection(del_row, false)
            }
            this.xmdmArr = []
            this.chooseList = []
            this.xmdmArr.push(row.xmdm)
            this.chooseList = row.bqszdx.map((item) => {
                return item.idBq
            })
        },

你可能感兴趣的:(elementui,vue.js,前端)