表格批量删除实现

<el-button type="danger" size="small" @click="handleDeleteAll">批量删除</el-button>

表格绑定点击多选框选中事件

<el-table 
ref="tableRef" 
:data="tableData"  
@selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
<el-table/>

获取当前选中行的ID数组，调用接口，传id数组进去

//批量删除
  //1.获取选中的id
  const selectionIds = ref([])
  const handleSelectionChange = (e)=>{
    selectionIds.value = e.map(item=>item.id)
    console.log(selectionIds.value);
  }
  //调用删除接口传ids数组进去
  const tableRef = ref(null) //表格节点
  const handleDeleteAll = ()=>{
    deleteSkus(selectionIds.value).then(res=>{
      toast('删除成功')
      //清空选中，要拿到表格，ref绑定表格节点
      tableRef.value.clearSelection()
      getTableList()
    })
  }

效果：