ant-design-vue 3 a-table保留选中状态

原创已于 2023-10-24 11:11:09 修改 · 801 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#anti-design-vue #vue.js #1024程序员节

收录于

于 2023-10-24 11:09:39 首次发布

本文介绍了如何在使用AntDesign的表格组件时，实现业务需求中需要保留选中状态的功能，包括行选择、全选操作以及处理翻页时选中状态的保留。

业务需求需要保留选中状态

	 <a-table class="satistic-table" 
		 :row-selection="{ selectedRowKeys: selectedRowKeys, onSelect:onSelect,onSelectAll:onSelectAll }" 
		 :row-key="(row)=>{ return row.customerId}" 
		 :columns="columns" 
		 :data-source="tableData" >
	 </a-table>

	const selectedRowKeys = ref([])
	//选择行
    const onSelect = (record, selected, selectedRows) => {
      if (selected) {
        selectedRowKeys.value = [record.customerId, ...selectedRowKeys.value]
      } else {
        selectedRowKeys.value = selectedRowKeys.value.filter((item) => item !== record.customerId)
      }
    }

    // 点击全选按钮
    const onSelectAll = (selected, selectedRows, changeRows) => {
      if (selected) {
        selectedRowKeys.value = [...selectedRowKeys.value, ...changeRows.map((item) => item.customerId)]
      } else {
        selectedRowKeys.value = selectedRowKeys.value.filter((item) => !changeRows.map((item) => item.customerId).includes(item))
      }
    }