Skip to main content

批量操作列表

批量操作列表是在基本列表基础上增加了批量操作的特性，适用于批量操作能带来显著商业价值的业务场景。如根据选择订单索取发票。

功能特性​

  • 跨分页选择
  • 选中项数量合计
  • 选中项关联的业务数据合计

支持跨分页选择​

用户要进行批量操作的项目可能分布在不同的分页中，这就要求能保存在不同分页中选择的状态。

选中状态的保存​

  • 如果只需要保存选中列表项中的 id，每次选择、或取消会触发方法，返回id数组，和对象数组，只需要保存 selectedRowKeys 的值来回显数据。
  • 如果需要保存对象数组，每次保存的数组与之前的数组合并，并且去除重复项。

Vue 参照实现​

HTML

  <a-table
    size="small"
    row-key="id"
    :row-selection="rowSelection"
    :columns="columns"
    :data-source="items"
    :pagination="false"
    :bordered="false"
    :loading="loading || !loaded"
    :scroll="{ x: 1400 }"
    @change="onDataChange"
  ></a-table>

Typescript

  const rowSelection = reactive({
    selectedRowKeys: [] as string[],
    onChange: (selectedRowKeys: string[], selectedRows: BatchModel[]) => {
      onSelectChange(selectedRowKeys, selectedRows);
    }
  });

  const onSelectChange = (rowIds: string[], rows: BatchModel[]) => {
    const batchModels = uniqBy(batchObj.items.concat(rows), 'id'); // 合并对象数组
    batchObj.items = batchModels.filter(item => rowIds.includes(item.id)); // 数组去重
    rowSelection.selectedRowKeys = rowIds; // 保存选中id
    let total = 0;
    batchObj.items.map(item => total =  total + parseFloat(item.price));
    amount.value = Number(total).toFixed(2);
  }

选中状态的清除​

下列场景需要清除项目的选中状态

  • 刷新列表
  • 重新查询

刷新、重新查询意味列表的数据结果集合变化，不清除选中项会导致实际选中项数量和列表显示选中数量不匹配

  // 清除选中的id 和 对象数组的方法
  const onClear = () => {
    batchObj.items = [];
    rowSelection.selectedRowKeys = [];
  };

  // 在刷新、重新查询的方法中执行
  const search = async (isRefresh = false) => {
    // ...
    onClear();
    // ...
  }

显示选中项关联的业务数据合计​

除了选中项的数量，有些场景要求业务数据合计作为用户决策的依据。如 选择要开发票的订单时，订单的合计金额作为用户决策的依据。

Vue 参照实现​

add/screenshot code here