效果展示

功能实现

1、列表页面

利用element-plus的组件el-table，轻松实现；

                        查询        批量删除                                            

2、批量删除功能

1）delData用来删除数据的方法；

2）handleSelectionChange获取列表选择的数据；

3）batchDel批量删除操作。

// 删除功能const delData = (arr: any, name: any, listData: any) => {  // console.log('listData', arr, listData)  const temListData = JSON.parse(JSON.stringify(listData))  for (let i = listData.length - 1; i >= 0; i--) { // 需要使用倒循环，不然i会溢出    for (let j in arr) {      if (listData[i]['date'] == arr[j]) {        temListData.splice(i, 1)        break      }    }  }  listData = temListData  return listData}

const handleSelectionChange = (val: any) => {  val.map((v: any, i: number) => {    state.multipleSelection.push(v['date'] as never)  })}const batchDel = () => {  ElMessageBox.confirm('确定删除数据?', '提示信息', {    confirmButtonText: '确定',    cancelButtonText: '取消',    type: 'warning'  })    .then(() => {      state.tableData = utils.delData(state.multipleSelection, 'date', tableData.value)      ElMessage({        type: 'success',        message: '删除成功'      })    })    .catch(() => {      // ElMessage({      //   type: 'info',      //   message: 'Delete canceled',      // })    })}

全部代码