antd table 复选框默认勾选 翻页保留勾选数据 默认禁用数据

409 阅读1分钟

    <a-table
      ref="table"
      :columns="columns"
      :row-key="(record) => record.id"
      :dataSource="dataSource"
      :pagination="pagination"
      :row-selection="rowSelection"
      :scroll="{ x: 'max-content' }"
    >
    </a-table>                
    let selectedRowKeysId = ref([])//最新勾选的数据id
    let OldselectedRowKeysId = ref([])//所有勾选的数据id
    let ids = ref([])//默认禁用的数据id
    const rowSelection = ref({
          checkStrictly: false,
          selectedRowKeys: OldselectedRowKeysId,//默认勾选的id
          onChange: (selectedRowKeys, selectedRows) => {
           selectedRowKeysId.value = selectedRowKeys
           selectedRowKeys.forEach((ol) => {
           OldselectedRowKeysId.value.includes(ol) ? '' : OldselectedRowKeysId.value.push(ol)
           })
         }
         onSelect:(record,selected,selectedRows,nativeEvent) =>{
         if(!selected){
         //数组去掉某个元素
           OldselectedRowKeysId.value.splice(OldselectedRowKeysId.value.index0f(record.id),}1)
           }
          }
         getCheckboxProps: (record) => ({
	          disabled: ids.value.includes(record.id),
	     })
     })