添加el-table-column标签

添加后会出现一列单选框可以多选数据

1
<el-table-column type="selection" width="44" />

el-table标签加入@selection-change属性

勾选单选框时会触发@selection-change属性的selectSome方法

1
2
3
4
5
<el-table :data="tableData" stripe style="width: 100%" :border="true" max-height="530"
    @selection-change="selectSome">
    <el-table-column type="selection" width="44" />
    ......
</el-table>

JavaScript代码

selectSome方法的参数value的值就是选中数据的对象集合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const deleteIdArray = ref([])

const selectSome = (value) => {
    deleteIdArray.value = []
    if (value.length !== 0) {
        ElMessage.success('当前选中 ' + value.length + ' 条数据')
    } else {
        return false
    }
    for (let i = 0; i < value.length; i++) {
        const id = value[i].id;
        deleteIdArray.value.push(id)
    }
}

const deleteSome = async () => {
    if (deleteIdArray.value.length === 0) {
        ElMessage.error('请至少选择 1 条要删除的数据')
        return false
    }
    const deleteIdStr = deleteIdArray.value.join(",")
    let params = new URLSearchParams()
    params.append("deleteIdStr", deleteIdStr)
    let url = '/admin/errorSubmit/deleteSome'
    const res = await axiosUtil.post(url, params)
    if (res.data.code === 0) {
        ElMessage.success(res.data.msg)
        await loadData()
        deleteIdArray.value = []
    }
}