Vue3列表加批量删除_vue3 全选删除列表

按钮

<el-popconfirm confirm-button-text="确定" cancel-button-text="取消"
 :icon="InfoFilled" icon-color="var(--el-color-danger)" title="确定要删除选中的记录？"
   @confirm="deleteAll">
      <template #reference>
         <el-button type="danger" :icon="Delete"
           v-show="selectionList.length > 0" style="margin-left:22px;">批量删除
         </el-button>
       </template>
 </el-popconfirm>

table（在第一列加小选择框）

<el-table :data="dataList" @selection-change="selectId" row-key="id">
<el-table-column type="selection" :reserve-selection="true" width="50" />

方法

const selectionList = ref([]);
 
function selectId(sele) {
  selectionList.value = [];
  if (sele.length > 0) {
    sele.forEach(obj => {
      selectionList.value.push(obj.id);
    })
  }
}
 
function deleteAll() {
  let postData = {
    "idList": selectionList.value
  }
  axios.post('delete', postData).then(res => {
    if (res && res.data && res.data.meta && res.data.meta.success) {
      ElMessage.success("删除成功!");
      selectionList.value = []
    } else {
      ElMessage.error(res.data.meta.message);
    }
  }).catch(error => {
    console.log(error);
  })
}