antd/lib/table/interface#TableRowSelection TypeScript Examples
The following examples show how to use
antd/lib/table/interface#TableRowSelection.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
private _initConfigProps = () => {
// 默认分页配置
const defaultPagination: TablePaginationConfig = {
current: this.page,
pageSize: this.pageSize,
total: this._total,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50"],
// eslint-disable-next-line react/display-name
showTotal: (totals) => (
<>
<span className={paginationStyle.totalText}>
{i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_TEXT}`)}{" "}
<strong className={paginationStyle.total}>{totals}</strong>{" "}
{i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_UNIT}`)}
</span>
{this.configProps?.rowSelection &&
this.showSelectInfo &&
this.selectedRowKeys.length !== 0 &&
this.renderSelectInfo()}
</>
),
};
const rowKey =
this.rowKey ?? this._fields.rowKey ?? this.configProps?.rowKey;
let rowDisabledConfig: RowDisabledProps[];
if (this.rowDisabledConfig) {
rowDisabledConfig = Array.isArray(this.rowDisabledConfig)
? this.rowDisabledConfig
: [this.rowDisabledConfig];
}
// 当 rowSelection 为 true 或者有相关配置的时候的默认行选择配置
const defaultRowSelection: TableRowSelection<any> = {
...(rowKey
? {
selectedRowKeys: this._isInSelect
? this.selectedRowKeys
: this.storeCheckedByUrl
? this._getCheckedFromUrl()
: this.defaultSelectAll
? this._handleDefaultSelectAll()
: this.selectedRowKeys,
onSelect: this._handleOnSelect,
onSelectAll: this._handleSelectAll,
onChange: this._handleRowSelectChange,
preserveSelectedRowKeys: true,
}
: {
// 当用户没有设置rowKey时的兼容处理
onChange: this._handleRowSelectChange,
preserveSelectedRowKeys: true,
}),
getCheckboxProps: (record: any) => {
if (
!isEmpty(this._disabledChildrenKeys) &&
this._disabledChildrenKeys.includes(get(record, rowKey))
) {
return {
disabled: true,
};
}
if (!rowDisabledConfig) return {};
return {
disabled: rowDisabledConfig.some((config) => {
const { field, value, operator } = config;
const fun = compareFunMap[operator];
return fun?.(value, get(record, field));
}),
};
},
};
if (this.configProps) {
this._finalConfigProps = cloneDeep(this.configProps);
if (this.configProps.pagination !== false) {
this._finalConfigProps.pagination = {
...defaultPagination,
...this.pagination,
...this.configProps.pagination,
};
if (
(this.configProps.pagination === undefined ||
this.configProps.pagination === null) &&
this.pagination === false
) {
this._finalConfigProps.pagination = false;
}
}
if (!this.configProps.size) {
this._finalConfigProps.size = this.size;
}
if (this.configProps.rowSelection) {
if (this.configProps.rowSelection === true) {
this._finalConfigProps.rowSelection = {
...defaultRowSelection,
type: this.type ?? "checkbox",
};
} else {
this._finalConfigProps.rowSelection = {
...defaultRowSelection,
type: this.type ?? "checkbox",
...this.configProps.rowSelection,
...(defaultRowSelection.selectedRowKeys
? { selectedRowKeys: defaultRowSelection.selectedRowKeys }
: {}),
};
}
} else {
if (this.type) {
this._finalConfigProps.rowSelection = {
...defaultRowSelection,
type: this.type,
};
}
}
} else {
this._finalConfigProps = {};
this._finalConfigProps.pagination =
this.pagination !== false ? defaultPagination : false;
this._finalConfigProps.size = this.size;
this._finalConfigProps.rowSelection = this.type && {
...defaultRowSelection,
type: this.type,
};
}
// 初始化列排序
if (this._columns) {
this._columns = this._columns.map((item) => {
if (isNil(item.key)) {
item.key = item.dataIndex as string;
}
if (item.sorter) {
item.sortOrder = (this.sort === item.key &&
!isNil(this.order) &&
(this._fields.ascend === this.order
? "ascend"
: "descend")) as SortOrder;
}
// 初始化表头过滤值
if (item.filters) {
const history = getHistory();
const urlSearchParams = new URLSearchParams(history.location.search);
const filteredValue =
urlSearchParams.get(item.key as string) ??
get(this.filters, item.key)?.join(",");
if (!isNil(filteredValue) && !isEmpty(filteredValue)) {
item.filtered = true;
item.filteredValue = filteredValue
.split(",")
.map(
(v) =>
find(item.filters, (f) => String(f.value) === v)?.value ?? v
);
} else {
item.filtered = false;
item.filteredValue = [];
}
}
return item;
});
}
};