Ant-Design-Vue组件批量删除优化

Ant-Design-Vue组件批量删除优化

技术选型 Ant-Design-Vue

需求

批量删除时，如果没有选中数据则不弹出确认删除框，减少对服务器发送请求的次数

新增按钮和删除选中按钮是分开的，图片不是很清楚

设计思路

Ant-Design-Vue 官方文档地址：

气泡确认框：https://antdv.com/components/popconfirm-cn/#Popconfirm

表格：https://antdv.com/components/table-cn/#rowselection

在确认删除弹框标签中添加两个属性：@openChange="onVisibleChange" :open="visible"

• openChange：显示隐藏的回调
• open：是否显示

在表格标签中添加属性:rowSelection="{selectedRowKeys: ids, onChange: onSelectChange}"

• rowSelection：列表项是否可选择
  • selectedRowKeys：指定选中项的 key 数组，需要和 onChange 进行配合
  • onChange：选中项发生变化时的回调

代码实现

确认删除按钮以及确认删除弹框

<a-popconfirm title="确定要删除选中的学生吗？" ok-text="确定" cancel-text="取消" @confirm="onDeleteIds"
                    @openChange="onVisibleChange" :open="visible">
        <a-button type="primary" size="small">删除选中</a-button>
      </a-popconfirm>

表格

<a-table :columns="colums" :data-source="students" row-key="id" :pagination="pagination" @change="tableChange"
           :rowSelection="{selectedRowKeys: ids, onChange: onSelectChange}">	

const ids = ref<number[]>([]) // 存放选中的 id

// 选中之后调用该函数
function onSelectChange(keys: number[]) {
  console.log("选中了学生" + keys)
  ids.value = keys // 将选中的数据关联到页面中
}

// 发送批量删除
async function onDeleteIds() {
  await deleteByIds(ids.value) // 执行删除（同步）
  ids.value = [] // 清空数组
  search(dto.value) // 删除之后重新分页查询
}

const {runAsync: deleteByIds} = useRequest<AxiosRespString, number[][]>(
    (ids) => axios.delete('api/students',{data: ids}),
    {
      manual: true // 代表手动执行
    }
)

// 如果没选择数据点击删除选中按钮不弹确认删除框
const visible = ref(false)

function onVisibleChange(v: boolean) {
  if (!v) {
    // 隐藏
    visible.value = false
  } else {
    // 选中了学生才显示确认框
    visible.value = ids.value.length > 0
  }
}