import { defineComponent, inject, markRaw } from 'vue'; import CaretUpFilled from '@ant-design/icons-vue/CaretUpFilled'; import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled'; import VcTable, { INTERNAL_COL_DEFINE } from '../vc-table'; import classNames from '../_util/classNames'; import shallowEqual from '../_util/shallowequal'; import FilterDropdown from './filterDropdown'; import createStore from './createStore'; import SelectionBox from './SelectionBox'; import SelectionCheckboxAll from './SelectionCheckboxAll'; import Column from './Column'; import ColumnGroup from './ColumnGroup'; import createBodyRow from './createBodyRow'; import { flatArray, treeMap, flatFilter } from './util'; import { getOptionProps } from '../_util/props-util'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import BaseMixin from '../_util/BaseMixin'; import { defaultConfigProvider } from '../config-provider'; import { TableProps, TableComponents, TableState, ITableProps, IColumnProps, TableStateFilters, } from './interface'; import Pagination from '../pagination'; import Spin from '../spin'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; import warning from '../_util/warning'; import scrollTo from '../_util/scrollTo'; import TransButton from '../_util/transButton'; function noop() {} function stopPropagation(e) { e.stopPropagation(); } function getRowSelection(props: ITableProps) { return props.rowSelection || {}; } function getColumnKey(column: IColumnProps, index?: number) { return column.key || column.dataIndex || index; } function isSameColumn(a: IColumnProps, b: IColumnProps): boolean { if (a && b && a.key && a.key === b.key) { return true; } return ( a === b || shallowEqual(a, b, (value, other) => { // https://github.com/ant-design/ant-design/issues/12737 if (typeof value === 'function' && typeof other === 'function') { return value === other || value.toString() === other.toString(); } // https://github.com/ant-design/ant-design/issues/19398 if (Array.isArray(value) && Array.isArray(other)) { return value === other || shallowEqual(value, other); } }) ); } const defaultPagination = { onChange: noop, onShowSizeChange: noop, }; /** * Avoid creating new object, so that parent component's shouldComponentUpdate * can works appropriately。 */ const emptyObject = {}; const createComponents = (components: TableComponents = {}) => { const bodyRow = components && components.body && components.body.row; return { ...components, body: { ...components.body, row: createBodyRow(bodyRow), }, }; }; function isTheSameComponents(components1: TableComponents = {}, components2: TableComponents = {}) { return ( components1 === components2 || ['table', 'header', 'body'].every(key => shallowEqual(components1[key], components2[key])) ); } function getFilteredValueColumns(state: TableState, columns?: IColumnProps) { return flatFilter( columns || (state || {}).columns || [], (column: IColumnProps) => typeof column.filteredValue !== 'undefined', ); } function getFiltersFromColumns(state: TableState, columns: IColumnProps) { const filters = {}; getFilteredValueColumns(state, columns).forEach((col: IColumnProps) => { const colKey = getColumnKey(col); filters[colKey] = col.filteredValue; }); return filters; } function isFiltersChanged(state: TableState, filters: TableStateFilters[]) { if (Object.keys(filters).length !== Object.keys(state.filters).length) { return true; } return Object.keys(filters).some(columnKey => filters[columnKey] !== state.filters[columnKey]); } export default defineComponent({ name: 'Table', mixins: [BaseMixin], inheritAttrs: false, Column, ColumnGroup, props: initDefaultProps(TableProps, { dataSource: [], useFixedHeader: false, // rowSelection: null, size: 'default', loading: false, bordered: false, indentSize: 20, locale: {}, rowKey: 'key', showHeader: true, sortDirections: ['ascend', 'descend'], childrenColumnName: 'children', }), setup() { return { vcTable: null, checkboxPropsCache: {}, store: null, configProvider: inject('configProvider', defaultConfigProvider), }; }, data(this) { const props = getOptionProps(this); warning( !props.expandedRowRender || !('scroll' in props), '`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.', ); const { getDefaultSortOrder, getDefaultFilters, getDefaultPagination } = this as typeof this & { getDefaultSortOrder: Function; getDefaultFilters: Function; getDefaultPagination: Function; }; return { ...getDefaultSortOrder(props.columns || []), // 减少状态 sFilters: getDefaultFilters(props.columns), sPagination: getDefaultPagination(this.$props), pivot: undefined, sComponents: markRaw(createComponents(this.components)), filterDataCnt: 0, }; }, created() { const props = getOptionProps(this); this.store = createStore({ selectedRowKeys: getRowSelection(props).selectedRowKeys || [], selectionDirty: false, }); }, watch: { pagination: { handler(val) { this.setState(previousState => { const newPagination = { ...defaultPagination, ...previousState.sPagination, ...val, }; newPagination.current = newPagination.current || 1; newPagination.pageSize = newPagination.pageSize || 10; return { sPagination: val !== false ? newPagination : emptyObject }; }); }, deep: true, }, rowSelection: { handler(val, oldVal) { if (val && 'selectedRowKeys' in val) { this.store.setState({ selectedRowKeys: val.selectedRowKeys || [], }); const { rowSelection } = this; if (rowSelection && val.getCheckboxProps !== rowSelection.getCheckboxProps) { this.checkboxPropsCache = {}; } } else if (oldVal && !val) { this.store.setState({ selectedRowKeys: [], }); } }, deep: true, }, dataSource() { this.store.setState({ selectionDirty: false, }); this.checkboxPropsCache = {}; }, columns(val) { const filteredValueColumns = getFilteredValueColumns({ columns: val }, val); if (filteredValueColumns.length > 0) { const filtersFromColumns = getFiltersFromColumns({ columns: val }, val); const newFilters = { ...this.sFilters }; Object.keys(filtersFromColumns).forEach(key => { newFilters[key] = filtersFromColumns[key]; }); if (isFiltersChanged({ filters: this.sFilters }, newFilters)) { this.setState({ sFilters: newFilters }); } } }, components: { handler(val, oldVal) { if (!isTheSameComponents(val, oldVal)) { const components = createComponents(val); this.setState({ sComponents: components }); } }, deep: true, }, }, updated() { const { columns, sSortColumn: sortColumn, sSortOrder: sortOrder } = this; if (this.getSortOrderColumns(columns).length > 0) { const sortState = this.getSortStateFromColumns(columns); if (!isSameColumn(sortState.sSortColumn, sortColumn) || sortState.sSortOrder !== sortOrder) { this.setState(sortState); } } }, methods: { setTableRef(table) { this.vcTable = table; }, getCheckboxPropsByItem(item, index) { const rowSelection = getRowSelection(this.$props); if (!rowSelection.getCheckboxProps) { return {}; } const key = this.getRecordKey(item, index); // Cache checkboxProps if (!this.checkboxPropsCache[key]) { this.checkboxPropsCache[key] = rowSelection.getCheckboxProps(item) || {}; } return this.checkboxPropsCache[key]; }, getDefaultSelection() { const rowSelection = getRowSelection(this.$props); if (!rowSelection.getCheckboxProps) { return []; } return this.getFlatData() .filter((item, rowIndex) => this.getCheckboxPropsByItem(item, rowIndex).defaultChecked) .map((record, rowIndex) => this.getRecordKey(record, rowIndex)); }, getDefaultPagination(props) { const pagination = typeof props.pagination === 'object' ? props.pagination : {}; let current; if ('current' in pagination) { current = pagination.current; } else if ('defaultCurrent' in pagination) { current = pagination.defaultCurrent; } let pageSize; if ('pageSize' in pagination) { pageSize = pagination.pageSize; } else if ('defaultPageSize' in pagination) { pageSize = pagination.defaultPageSize; } return this.hasPagination(props) ? { ...defaultPagination, ...pagination, current: current || 1, pageSize: pageSize || 10, } : {}; }, getSortOrderColumns(columns) { return flatFilter(columns || this.columns || [], column => 'sortOrder' in column); }, getDefaultFilters(columns) { const definedFilters = getFiltersFromColumns({ columns: this.columns }, columns); const defaultFilteredValueColumns = flatFilter( columns || [], column => typeof column.defaultFilteredValue !== 'undefined', ); const defaultFilters = defaultFilteredValueColumns.reduce((soFar, col) => { const colKey = getColumnKey(col); soFar[colKey] = col.defaultFilteredValue; return soFar; }, {}); return { ...defaultFilters, ...definedFilters }; }, getDefaultSortOrder(columns) { const definedSortState = this.getSortStateFromColumns(columns); const defaultSortedColumn = flatFilter(columns || [], column => { return column.defaultSortOrder != null; })[0]; if (defaultSortedColumn && !definedSortState.sortColumn) { return { sSortColumn: defaultSortedColumn, sSortOrder: defaultSortedColumn.defaultSortOrder, }; } return definedSortState; }, getSortStateFromColumns(columns) { // return first column which sortOrder is not falsy const sortedColumn = this.getSortOrderColumns(columns).filter(col => col.sortOrder)[0]; if (sortedColumn) { return { sSortColumn: sortedColumn, sSortOrder: sortedColumn.sortOrder, }; } return { sSortColumn: null, sSortOrder: null, }; }, getMaxCurrent(total) { const { current, pageSize } = this.sPagination; if ((current - 1) * pageSize >= total) { return Math.floor((total - 1) / pageSize) + 1; } return current; }, getRecordKey(record, index) { const { rowKey } = this; const recordKey = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey]; warning( recordKey !== undefined, 'Table', 'Each record in dataSource of table should have a unique `key` prop, ' + 'or set `rowKey` of Table to an unique primary key, ', ); return recordKey === undefined ? index : recordKey; }, getSorterFn(state) { const { sSortOrder: sortOrder, sSortColumn: sortColumn } = state || this.$data; if (!sortOrder || !sortColumn || typeof sortColumn.sorter !== 'function') { return; } return (a, b) => { const result = sortColumn.sorter(a, b, sortOrder); if (result !== 0) { return sortOrder === 'descend' ? -result : result; } return 0; }; }, getCurrentPageData() { let data = this.getLocalData(); this.filterDataCnt = data.length; let current; let pageSize; const sPagination = this.sPagination; // 如果没有分页的话,默认全部展示 if (!this.hasPagination()) { pageSize = Number.MAX_VALUE; current = 1; } else { pageSize = sPagination.pageSize; current = this.getMaxCurrent(sPagination.total || data.length); } // 分页 // --- // 当数据量少于等于每页数量时,直接设置数据 // 否则进行读取分页数据 if (data.length > pageSize || pageSize === Number.MAX_VALUE) { data = data.slice((current - 1) * pageSize, current * pageSize); } return data; }, getFlatData() { const { childrenColumnName } = this.$props; return flatArray(this.getLocalData(null, false), childrenColumnName); }, getFlatCurrentPageData() { const { childrenColumnName } = this.$props; return flatArray(this.getCurrentPageData(), childrenColumnName); }, getLocalData(state, filter = true) { const currentState = state || this.$data; const { sFilters: filters } = currentState; const { dataSource } = this.$props; let data = dataSource || []; // 优化本地排序 data = data.slice(0); const sorterFn = this.getSorterFn(currentState); if (sorterFn) { // 使用新数组,避免改变原数组导致无限循环更新 // https://github.com/vueComponent/ant-design-vue/issues/2270 data = this.recursiveSort([...data], sorterFn); } // 筛选 if (filter && filters) { Object.keys(filters).forEach(columnKey => { const col = this.findColumn(columnKey); if (!col) { return; } const values = filters[columnKey] || []; if (values.length === 0) { return; } const onFilter = col.onFilter; data = onFilter ? data.filter(record => { return values.some(v => onFilter(v, record)); }) : data; }); } return data; }, onRow(prefixCls, record, index) { const { customRow } = this; const custom = customRow ? customRow(record, index) : {}; return { ...custom, prefixCls, store: this.store, rowKey: this.getRecordKey(record, index) }; }, setSelectedRowKeys(selectedRowKeys, selectionInfo) { const { selectWay, record, checked, changeRowKeys, nativeEvent } = selectionInfo; const rowSelection = getRowSelection(this.$props); if (rowSelection && !('selectedRowKeys' in rowSelection)) { this.store.setState({ selectedRowKeys }); } const data = this.getFlatData(); if (!rowSelection.onChange && !rowSelection[selectWay]) { return; } const selectedRows = data.filter( (row, i) => selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0, ); if (rowSelection.onChange) { rowSelection.onChange(selectedRowKeys, selectedRows); } if (selectWay === 'onSelect' && rowSelection.onSelect) { rowSelection.onSelect(record, checked, selectedRows, nativeEvent); } else if (selectWay === 'onSelectMultiple' && rowSelection.onSelectMultiple) { const changeRows = data.filter( (row, i) => changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0, ); rowSelection.onSelectMultiple(checked, selectedRows, changeRows); } else if (selectWay === 'onSelectAll' && rowSelection.onSelectAll) { const changeRows = data.filter( (row, i) => changeRowKeys.indexOf(this.getRecordKey(row, i)) >= 0, ); rowSelection.onSelectAll(checked, selectedRows, changeRows); } else if (selectWay === 'onSelectInvert' && rowSelection.onSelectInvert) { rowSelection.onSelectInvert(selectedRowKeys); } }, generatePopupContainerFunc(getPopupContainer) { const { scroll } = this.$props; const table = this.vcTable; if (getPopupContainer) { return getPopupContainer; } // Use undefined to let rc component use default logic. return scroll && table ? () => table.tableNode : undefined; }, scrollToFirstRow() { const { scroll } = this.$props; if (scroll && scroll.scrollToFirstRowOnChange !== false) { scrollTo(0, { getContainer: () => { return this.vcTable.ref_bodyTable; }, }); } }, isSameColumn(a, b) { if (a && b && a.key && a.key === b.key) { return true; } return ( a === b || shallowEqual(a, b, (value, other) => { if (typeof value === 'function' && typeof other === 'function') { return value === other || value.toString() === other.toString(); } }) ); }, handleFilter(column, nextFilters) { const props = this.$props; const pagination = { ...this.sPagination }; const filters = { ...this.sFilters, [getColumnKey(column)]: nextFilters, }; // Remove filters not in current columns const currentColumnKeys = []; treeMap(this.columns, c => { if (!c.children) { currentColumnKeys.push(getColumnKey(c)); } }); Object.keys(filters).forEach(columnKey => { if (currentColumnKeys.indexOf(columnKey) < 0) { delete filters[columnKey]; } }); if (props.pagination) { // Reset current prop pagination.current = 1; pagination.onChange(pagination.current); } const newState = { sPagination: pagination, sFilters: {}, }; const filtersToSetState = { ...filters }; // Remove filters which is controlled getFilteredValueColumns({ columns: props.columns }).forEach(col => { const columnKey = getColumnKey(col); if (columnKey) { delete filtersToSetState[columnKey]; } }); if (Object.keys(filtersToSetState).length > 0) { newState.sFilters = filtersToSetState; } // Controlled current prop will not respond user interaction if (typeof props.pagination === 'object' && 'current' in props.pagination) { newState.sPagination = { ...pagination, current: this.sPagination.current, }; } this.setState(newState, () => { this.scrollToFirstRow(); this.store.setState({ selectionDirty: false, }); this.$emit( 'change', ...this.prepareParamsArguments({ ...this.$data, sSelectionDirty: false, sFilters: filters, sPagination: pagination, }), ); }); }, handleSelect(record, rowIndex, e) { const checked = e.target.checked; const nativeEvent = e.nativeEvent; const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection(); let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); const key = this.getRecordKey(record, rowIndex); const { pivot } = this.$data; const rows = this.getFlatCurrentPageData(); let realIndex = rowIndex; if (this.$props.expandedRowRender) { realIndex = rows.findIndex(row => this.getRecordKey(row, rowIndex) === key); } if (nativeEvent.shiftKey && pivot !== undefined && realIndex !== pivot) { const changeRowKeys = []; const direction = Math.sign(pivot - realIndex); const dist = Math.abs(pivot - realIndex); let step = 0; while (step <= dist) { const i = realIndex + step * direction; step += 1; const row = rows[i]; const rowKey = this.getRecordKey(row, i); const checkboxProps = this.getCheckboxPropsByItem(row, i); if (!checkboxProps.disabled) { if (selectedRowKeys.includes(rowKey)) { if (!checked) { selectedRowKeys = selectedRowKeys.filter(j => rowKey !== j); changeRowKeys.push(rowKey); } } else if (checked) { selectedRowKeys.push(rowKey); changeRowKeys.push(rowKey); } } } this.setState({ pivot: realIndex }); this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { selectWay: 'onSelectMultiple', record, checked, changeRowKeys, nativeEvent, }); } else { if (checked) { selectedRowKeys.push(this.getRecordKey(record, realIndex)); } else { selectedRowKeys = selectedRowKeys.filter(i => key !== i); } this.setState({ pivot: realIndex }); this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { selectWay: 'onSelect', record, checked, changeRowKeys: undefined, nativeEvent, }); } }, handleRadioSelect(record, rowIndex, e) { const checked = e.target.checked; const nativeEvent = e.nativeEvent; const key = this.getRecordKey(record, rowIndex); const selectedRowKeys = [key]; this.store.setState({ selectionDirty: true, }); this.setSelectedRowKeys(selectedRowKeys, { selectWay: 'onSelect', record, checked, changeRowKeys: undefined, nativeEvent, }); }, handleSelectRow(selectionKey, index, onSelectFunc) { const data = this.getFlatCurrentPageData(); const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection(); const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection); const changeableRowKeys = data .filter((item, i) => !this.getCheckboxPropsByItem(item, i).disabled) .map((item, i) => this.getRecordKey(item, i)); const changeRowKeys = []; let selectWay = 'onSelectAll'; let checked; // handle default selection switch (selectionKey) { case 'all': changeableRowKeys.forEach(key => { if (selectedRowKeys.indexOf(key) < 0) { selectedRowKeys.push(key); changeRowKeys.push(key); } }); selectWay = 'onSelectAll'; checked = true; break; case 'removeAll': changeableRowKeys.forEach(key => { if (selectedRowKeys.indexOf(key) >= 0) { selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1); changeRowKeys.push(key); } }); selectWay = 'onSelectAll'; checked = false; break; case 'invert': changeableRowKeys.forEach(key => { if (selectedRowKeys.indexOf(key) < 0) { selectedRowKeys.push(key); } else { selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1); } changeRowKeys.push(key); selectWay = 'onSelectInvert'; }); break; default: break; } this.store.setState({ selectionDirty: true, }); // when select custom selection, callback selections[n].onSelect const { rowSelection } = this; let customSelectionStartIndex = 2; if (rowSelection && rowSelection.hideDefaultSelections) { customSelectionStartIndex = 0; } if (index >= customSelectionStartIndex && typeof onSelectFunc === 'function') { return onSelectFunc(changeableRowKeys); } this.setSelectedRowKeys(selectedRowKeys, { selectWay, checked, changeRowKeys, }); }, handlePageChange(current, ...otherArguments) { const props = this.$props; const pagination = { ...this.sPagination }; if (current) { pagination.current = current; } else { pagination.current = pagination.current || 1; } pagination.onChange(pagination.current, ...otherArguments); const newState = { sPagination: pagination, }; // Controlled current prop will not respond user interaction if ( props.pagination && typeof props.pagination === 'object' && 'current' in props.pagination ) { newState.sPagination = { ...pagination, current: this.sPagination.current, }; } this.setState(newState, this.scrollToFirstRow); this.store.setState({ selectionDirty: false, }); this.$emit( 'change', ...this.prepareParamsArguments({ ...this.$data, sSelectionDirty: false, sPagination: pagination, }), ); }, handleShowSizeChange(current, pageSize) { const pagination = this.sPagination; pagination.onShowSizeChange(current, pageSize); const nextPagination = { ...pagination, pageSize, current, }; this.setState({ sPagination: nextPagination }, this.scrollToFirstRow); this.$emit( 'change', ...this.prepareParamsArguments({ ...this.$data, sPagination: nextPagination, }), ); }, toggleSortOrder(column) { const sortDirections = column.sortDirections || this.sortDirections; const { sSortOrder: sortOrder, sSortColumn: sortColumn } = this; // 只同时允许一列进行排序,否则会导致排序顺序的逻辑问题 let newSortOrder; // 切换另一列时,丢弃 sortOrder 的状态 if (isSameColumn(sortColumn, column) && sortOrder !== undefined) { // 按照sortDirections的内容依次切换排序状态 const methodIndex = sortDirections.indexOf(sortOrder) + 1; newSortOrder = methodIndex === sortDirections.length ? undefined : sortDirections[methodIndex]; } else { newSortOrder = sortDirections[0]; } const newState = { sSortOrder: newSortOrder, sSortColumn: newSortOrder ? column : null, }; // Controlled if (this.getSortOrderColumns().length === 0) { this.setState(newState, this.scrollToFirstRow); } this.$emit( 'change', ...this.prepareParamsArguments( { ...this.$data, ...newState, }, column, ), ); }, hasPagination(props) { return (props || this.$props).pagination !== false; }, isSortColumn(column) { const { sSortColumn: sortColumn } = this; if (!column || !sortColumn) { return false; } return getColumnKey(sortColumn) === getColumnKey(column); }, // Get pagination, filters, sorter prepareParamsArguments(state, column) { const pagination = { ...state.sPagination }; // remove useless handle function in Table.onChange delete pagination.onChange; delete pagination.onShowSizeChange; const filters = state.sFilters; const sorter: any = {}; let currentColumn = column; if (state.sSortColumn && state.sSortOrder) { currentColumn = state.sSortColumn; sorter.column = state.sSortColumn; sorter.order = state.sSortOrder; } if (currentColumn) { sorter.field = currentColumn.dataIndex; sorter.columnKey = getColumnKey(currentColumn); } const extra = { currentDataSource: this.getLocalData(state), }; return [pagination, filters, sorter, extra]; }, findColumn(myKey) { let column; treeMap(this.columns, c => { if (getColumnKey(c) === myKey) { column = c; } }); return column; }, recursiveSort(data, sorterFn) { const { childrenColumnName = 'children' } = this; return data.sort(sorterFn).map(item => item[childrenColumnName] ? { ...item, [childrenColumnName]: this.recursiveSort([...item[childrenColumnName]], sorterFn), } : item, ); }, renderExpandIcon(prefixCls: string) { if (this.expandIcon) { return this.expandIcon; } return ({ expandable, expanded, needIndentSpaced, record, onExpand }) => { if (expandable) { return ( ( { onExpand(record, event); }} aria-label={expanded ? locale.collapse : locale.expand} noStyle /> )} /> ); } if (needIndentSpaced) { return ; } return null; }; }, renderPagination(prefixCls, paginationPosition) { // 强制不需要分页 if (!this.hasPagination()) { return null; } let size = 'default'; const { sPagination: pagination } = this; if (pagination.size) { size = pagination.size; } else if (this.size === 'middle' || this.size === 'small') { size = 'small'; } const position = pagination.position || 'bottom'; const total = pagination.total || this.filterDataCnt; const { class: cls, style, onChange, onShowSizeChange, ...restProps } = pagination; // eslint-disable-line const paginationProps = { key: `pagination-${paginationPosition}`, class: classNames(cls, `${prefixCls}-pagination`), ...restProps, total, size, current: this.getMaxCurrent(total), style, onChange: this.handlePageChange, onShowSizeChange: this.handleShowSizeChange, }; return total > 0 && (position === paginationPosition || position === 'both') ? ( ) : null; }, renderSelectionBox(type) { return ({ record, index }) => { const rowKey = this.getRecordKey(record, index); // 从 1 开始 const props = this.getCheckboxPropsByItem(record, index); const handleChange = e => { type === 'radio' ? this.handleRadioSelect(record, index, e) : this.handleSelect(record, index, e); }; const selectionBoxProps = { type, store: this.store, rowIndex: rowKey, defaultSelection: this.getDefaultSelection(), onChange: handleChange, ...props, }; return ( ); }; }, renderRowSelection({ prefixCls, locale, getPopupContainer }) { const { rowSelection } = this; const columns = this.columns.concat(); if (rowSelection) { const data = this.getFlatCurrentPageData().filter((item, index) => { if (rowSelection.getCheckboxProps) { return !this.getCheckboxPropsByItem(item, index).disabled; } return true; }); const selectionColumnClass = classNames(`${prefixCls}-selection-column`, { [`${prefixCls}-selection-column-custom`]: rowSelection.selections, }); const selectionColumn = { key: 'selection-column', customRender: this.renderSelectionBox(rowSelection.type), className: selectionColumnClass, fixed: rowSelection.fixed, width: rowSelection.columnWidth, title: rowSelection.columnTitle, [INTERNAL_COL_DEFINE]: { class: `${prefixCls}-selection-col`, }, }; if (rowSelection.type !== 'radio') { const checkboxAllDisabled = data.every( (item, index) => this.getCheckboxPropsByItem(item, index).disabled, ); selectionColumn.title = selectionColumn.title || ( ); } if ('fixed' in rowSelection) { selectionColumn.fixed = rowSelection.fixed; } else if (columns.some(column => column.fixed === 'left' || column.fixed === true)) { selectionColumn.fixed = 'left'; } if (columns[0] && columns[0].key === 'selection-column') { columns[0] = selectionColumn; } else { columns.unshift(selectionColumn); } } return columns; }, renderColumnsDropdown({ prefixCls, dropdownPrefixCls, columns, locale, getPopupContainer }) { const { sSortOrder: sortOrder, sFilters: filters } = this; return treeMap(columns, (column, i) => { const key = getColumnKey(column, i); let filterDropdown; let sortButton; let customHeaderCell = column.customHeaderCell; const isSortColumn = this.isSortColumn(column); if ((column.filters && column.filters.length > 0) || column.filterDropdown) { const colFilters = key in filters ? filters[key] : []; filterDropdown = ( ); } if (column.sorter) { const sortDirections = column.sortDirections || this.sortDirections; const isAscend = isSortColumn && sortOrder === 'ascend'; const isDescend = isSortColumn && sortOrder === 'descend'; const ascend = sortDirections.indexOf('ascend') !== -1 && ( ); const descend = sortDirections.indexOf('descend') !== -1 && ( ); sortButton = (
{ascend} {descend}
); customHeaderCell = col => { let colProps: any = {}; // Get original first if (column.customHeaderCell) { colProps = { ...column.customHeaderCell(col), }; } // Add sorter logic const onHeaderCellClick = colProps.onClick; colProps.onClick = (...args) => { this.toggleSortOrder(column); if (onHeaderCellClick) { onHeaderCellClick(...args); } }; return colProps; }; } return { ...column, className: classNames(column.className, { [`${prefixCls}-column-has-actions`]: sortButton || filterDropdown, [`${prefixCls}-column-has-filters`]: filterDropdown, [`${prefixCls}-column-has-sorters`]: sortButton, [`${prefixCls}-column-sort`]: isSortColumn && sortOrder, }), title: [
{this.renderColumnTitle(column.title)} {sortButton}
, filterDropdown, ], customHeaderCell, }; }); }, renderColumnTitle(title) { const { sFilters: filters, sSortOrder: sortOrder, sSortColumn: sortColumn } = this.$data; // https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167 if (title instanceof Function) { return title({ filters, sortOrder, sortColumn, }); } return title; }, renderTable({ prefixCls, renderEmpty, dropdownPrefixCls, contextLocale, getPopupContainer: contextGetPopupContainer, transformCellText, }) { const { showHeader, locale, getPopupContainer, ...restProps } = { ...getOptionProps(this), ...this.$attrs, } as any; const data = this.getCurrentPageData(); const expandIconAsCell = this.expandedRowRender && this.expandIconAsCell !== false; // use props.getPopupContainer first const realGetPopupContainer = getPopupContainer || contextGetPopupContainer; // Merge too locales const mergedLocale = { ...contextLocale, ...locale }; if (!locale || !locale.emptyText) { mergedLocale.emptyText = renderEmpty('Table'); } const classString = classNames({ [`${prefixCls}-${this.size}`]: true, [`${prefixCls}-bordered`]: this.bordered, [`${prefixCls}-empty`]: !data.length, [`${prefixCls}-without-column-header`]: !showHeader, }); const columnsWithRowSelection = this.renderRowSelection({ prefixCls, locale: mergedLocale, getPopupContainer: realGetPopupContainer, }); const columns = this.renderColumnsDropdown({ columns: columnsWithRowSelection, prefixCls, dropdownPrefixCls, locale: mergedLocale, getPopupContainer: realGetPopupContainer, }).map((column, i) => { const newColumn = { ...column }; newColumn.key = getColumnKey(newColumn, i); return newColumn; }); let expandIconColumnIndex = columns[0] && columns[0].key === 'selection-column' ? 1 : 0; if ('expandIconColumnIndex' in restProps) { expandIconColumnIndex = restProps.expandIconColumnIndex; } const vcTableProps = { key: 'table', expandIcon: this.renderExpandIcon(prefixCls), ...restProps, customRow: (record, index) => this.onRow(prefixCls, record, index), components: this.sComponents, prefixCls, data, columns, showHeader, expandIconColumnIndex, expandIconAsCell, emptyText: mergedLocale.emptyText, transformCellText, class: classString, ref: this.setTableRef, }; return ; }, }, render() { const { prefixCls: customizePrefixCls, dropdownPrefixCls: customizeDropdownPrefixCls, transformCellText: customizeTransformCellText, } = this; const data = this.getCurrentPageData(); const { getPopupContainer: getContextPopupContainer, transformCellText: tct, } = this.configProvider; const getPopupContainer = this.getPopupContainer || getContextPopupContainer; const transformCellText = customizeTransformCellText || tct; let loading = this.loading; if (typeof loading === 'boolean') { loading = { spinning: loading, }; } const getPrefixCls = this.configProvider.getPrefixCls; const renderEmpty = this.configProvider.renderEmpty; const prefixCls = getPrefixCls('table', customizePrefixCls); const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls); const table = ( this.renderTable({ prefixCls, renderEmpty, dropdownPrefixCls, contextLocale: locale, getPopupContainer, transformCellText, }) } /> ); // if there is no pagination or no data, // the height of spin should decrease by half of pagination const paginationPatchClass = this.hasPagination() && data && data.length !== 0 ? `${prefixCls}-with-pagination` : `${prefixCls}-without-pagination`; const spinProps = { ...loading, class: loading && loading.spinning ? `${paginationPatchClass} ${prefixCls}-spin-holder` : '', }; const { class: className, style } = this.$attrs; return (
{this.renderPagination(prefixCls, 'top')} {table} {this.renderPagination(prefixCls, 'bottom')}
); }, });