多选框实现批量操作

1.a-table绑定

 注意：切记添加rowKey="id"，否则点击都是全部选择

2.添加选中逻辑

// 在选中数据项时更新 checked 属性
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    // 遍历所有数据项，更新 checked 属性
    // debugger
    tableData.value.forEach((item) => {
      if (selectedRowKeys.includes(item.id)) {
        item.checked = true
      } else {
        item.checked = false
      }
    })
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  getCheckboxProps: (record) => ({})
}

批量操作逻辑根据接口来实现即可

3.批量发布停用操作示例

// 是否启用批量发布按钮
const isBatchPublishEnabled = ref(false)
// 是否启用批量停用按钮
const isBatchDisableEnabled = ref(false)
// 批量发布函数
const batchPublish = async () => {
  // 获取选中的行的数据项
  const selectedRows = tableData.value.filter((item) => item.checked)
  const selectedUnpublishedRows = selectedRows.filter(
    (item) => item.assetStatus === 0 || item.assetStatus === 2
  )
  if (selectedUnpublishedRows.length === 0) {
    message.warning('请选择未发布或已停用的码表！')
    return
  }
  const ids = selectedUnpublishedRows.map((row) => row.id)
  try {
    // 调用后端接口批量发布码表
    await changeAssetStatus({
      ids: ids,
      assetStatus: 1
    })
    message.success('批量发布成功！')
    // 刷新表格数据
    getData()
  } catch (error) {
    message.error('批量发布失败，请稍后重试！')
  }
}
// 批量停用函数
const batchDisable = async () => {
  // 获取选中的行的数据项
  const selectedRows = tableData.value.filter((item) => item.checked)
  const selectedPublishedRows = selectedRows.filter((item) => item.assetStatus === 1)
  if (selectedPublishedRows.length === 0) {
    message.warning('请选择已发布的码表！')
    return
  }
  const ids = selectedPublishedRows.map((row) => row.id)
  try {
    // 调用后端接口批量停用码表
    await changeAssetStatus({ ids: ids, assetStatus: 2 })
    message.success('批量停用成功！')
    // 刷新表格数据
    getData()
  } catch (error) {
    message.error('批量停用失败，请稍后重试！')
  }
}

            <!-- 批量发布按钮 -->
            <a-button
              style="background-color: lightgreen; color: #fff"
              :disabled="isBatchPublishEnabled"
              @click="batchPublish"
            >
              批量发布
            </a-button>

            <!-- 批量停用按钮 -->
            <a-button
              style="background-color: red; color: #fff"
              :style="{ backgroundColor: isBatchDisableEnabled ? '#ccc' : 'red' }"
              :disabled="isBatchDisableEnabled"
              @click="batchDisable"
            >
              批量停用
            </a-button>