Skip to content

Commit 8340a0b

Browse files
tangjinzhoutangjinzhou
committed
feat: table add expandIcon
1 parent ad07278 commit 8340a0b

File tree

7 files changed

+91
-58
lines changed

7 files changed

+91
-58
lines changed

‎components/table/SelectionCheckboxAll.jsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@ export default {
5050
subscribe () {
5151
const { store } = this
5252
this.unsubscribe = store.subscribe(() => {
53-
this.setCheckState()
53+
this.setCheckState(this.$props)
5454
})
5555
},
5656

57-
checkSelection (data, type, byDefaultChecked) {
58-
const { store, getCheckboxPropsByItem, getRecordKey } = this
57+
checkSelection (props, data, type, byDefaultChecked) {
58+
const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props
5959
// type should be 'every' | 'some'
6060
if (type === 'every' || type === 'some') {
6161
return (
@@ -68,9 +68,9 @@ export default {
6868
return false
6969
},
7070

71-
setCheckState () {
72-
const checked = this.getCheckState()
73-
const indeterminate = this.getIndeterminateState()
71+
setCheckState (props) {
72+
const checked = this.getCheckState(props)
73+
const indeterminate = this.getIndeterminateState(props)
7474
this.setState((prevState) => {
7575
const newState = {}
7676
if (indeterminate !== prevState.indeterminate) {
@@ -83,43 +83,43 @@ export default {
8383
})
8484
},
8585

86-
getCheckState () {
86+
getCheckState (props) {
8787
const { store, data } = this
8888
let checked
8989
if (!data.length) {
9090
checked = false
9191
} else {
9292
checked = store.getState().selectionDirty
93-
? this.checkSelection(data, 'every', false)
93+
? this.checkSelection(props, data, 'every', false)
9494
: (
95-
this.checkSelection(data, 'every', false) ||
96-
this.checkSelection(data, 'every', true)
95+
this.checkSelection(props, data, 'every', false) ||
96+
this.checkSelection(props, data, 'every', true)
9797
)
9898
}
9999
return checked
100100
},
101101

102-
getIndeterminateState () {
102+
getIndeterminateState (props) {
103103
const { store, data } = this
104104
let indeterminate
105105
if (!data.length) {
106106
indeterminate = false
107107
} else {
108108
indeterminate = store.getState().selectionDirty
109109
? (
110-
this.checkSelection(data, 'some', false) &&
111-
!this.checkSelection(data, 'every', false)
110+
this.checkSelection(props, data, 'some', false) &&
111+
!this.checkSelection(props, data, 'every', false)
112112
)
113-
: ((this.checkSelection(data, 'some', false) &&
114-
!this.checkSelection(data, 'every', false)) ||
115-
(this.checkSelection(data, 'some', true) &&
116-
!this.checkSelection(data, 'every', true))
113+
: ((this.checkSelection(props, data, 'some', false) &&
114+
!this.checkSelection(props, data, 'every', false)) ||
115+
(this.checkSelection(props, data, 'some', true) &&
116+
!this.checkSelection(props, data, 'every', true))
117117
)
118118
}
119119
return indeterminate
120120
},
121121

122-
handleSelectAllChagne (e) {
122+
handleSelectAllChange (e) {
123123
const checked = e.target.checked
124124
this.$emit('select', checked ? 'all' : 'removeAll', 0, null)
125125
},
@@ -182,7 +182,7 @@ export default {
182182
checked={checked}
183183
indeterminate={indeterminate}
184184
disabled={disabled}
185-
onChange={this.handleSelectAllChagne}
185+
onChange={this.handleSelectAllChange}
186186
/>
187187
{customSelections}
188188
</div>

‎components/table/Table.jsx‎

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Column from './Column'
1616
import ColumnGroup from './ColumnGroup'
1717
import createBodyRow from './createBodyRow'
1818
import { flatArray, treeMap, flatFilter } from './util'
19-
import { initDefaultProps, mergeProps, getOptionProps } from '../_util/props-util'
19+
import { initDefaultProps, mergeProps, getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util'
2020
import BaseMixin from '../_util/BaseMixin'
2121
import {
2222
TableProps,
@@ -437,7 +437,7 @@ export default {
437437
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection)
438438
const key = this.getRecordKey(record, rowIndex)
439439
const { pivot } = this.$data
440-
const rows = this.getFlatCurrentPageData()
440+
const rows = this.getFlatCurrentPageData(this.$props.childrenColumnName)
441441
let realIndex = rowIndex
442442
if (this.$props.expandedRowRender) {
443443
realIndex = rows.findIndex(row => this.getRecordKey(row, rowIndex) === key)
@@ -500,10 +500,8 @@ export default {
500500
handleRadioSelect (record, rowIndex, e) {
501501
const checked = e.target.checked
502502
const nativeEvent = e.nativeEvent
503-
const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection()
504-
let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection)
505503
const key = this.getRecordKey(record, rowIndex)
506-
selectedRowKeys = [key]
504+
const selectedRowKeys = [key]
507505
this.store.setState({
508506
selectionDirty: true,
509507
})
@@ -517,7 +515,7 @@ export default {
517515
},
518516

519517
handleSelectRow (selectionKey, index, onSelectFunc) {
520-
const data = this.getFlatCurrentPageData()
518+
const data = this.getFlatCurrentPageData(this.$props.childrenColumnName)
521519
const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection()
522520
const selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection)
523521
const changeableRowKeys = data
@@ -662,10 +660,10 @@ export default {
662660
},
663661

664662
renderRowSelection (locale) {
665-
const { prefixCls, rowSelection } = this
663+
const { prefixCls, rowSelection, childrenColumnName } = this
666664
const columns = this.columns.concat()
667665
if (rowSelection) {
668-
const data = this.getFlatCurrentPageData().filter((item, index) => {
666+
const data = this.getFlatCurrentPageData(childrenColumnName).filter((item, index) => {
669667
if (rowSelection.getCheckboxProps) {
670668
return !this.getCheckboxPropsByItem(item, index).props.disabled
671669
}
@@ -741,6 +739,14 @@ export default {
741739
const key = this.getColumnKey(column, i)
742740
let filterDropdown
743741
let sortButton
742+
let customHeaderCell = column.customHeaderCell
743+
const { slots } = column
744+
let title = column.title
745+
if (title === undefined && slots && slots.title) {
746+
title = this.$slots[slots.title]
747+
title = title && title[0]
748+
}
749+
const sortTitle = this.getColumnTitle(title, {}) || locale.sortTitle
744750
const isSortColumn = this.isSortColumn(column)
745751
if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
746752
const colFilters = key in filters ? filters[key] : []
@@ -759,12 +765,6 @@ export default {
759765
)
760766
}
761767
if (column.sorter) {
762-
// const isSortColumn = this.isSortColumn(column)
763-
// if (isSortColumn) {
764-
// column.className = classNames(column.className, {
765-
// [`${prefixCls}-column-sort`]: sortOrder,
766-
// })
767-
// }
768768
const isAscend = isSortColumn && sortOrder === 'ascend'
769769
const isDescend = isSortColumn && sortOrder === 'descend'
770770
sortButton = (
@@ -781,7 +781,27 @@ export default {
781781
/>
782782
</div>
783783
)
784+
customHeaderCell = (col) => {
785+
let colProps = {}
786+
// Get original first
787+
if (column.customHeaderCell) {
788+
colProps = {
789+
...column.customHeaderCell(col),
790+
}
791+
}
792+
colProps.on = colProps.on || {}
793+
// Add sorter logic
794+
const onHeaderCellClick = colProps.on.click
795+
colProps.on.click = (...args) => {
796+
this.toggleSortOrder(column)
797+
if (onHeaderCellClick) {
798+
onHeaderCellClick(...args)
799+
}
800+
}
801+
return colProps
802+
}
784803
}
804+
const sortTitleString = sortButton && typeof sortTitle === 'string' ? sortTitle : undefined
785805
return {
786806
...column,
787807
className: classNames(column.className, {
@@ -793,29 +813,16 @@ export default {
793813
title: [
794814
<div
795815
key='title'
796-
title={sortButton ? locale.sortTitle : undefined}
816+
title={sortTitleString}
797817
class={sortButton ? `${prefixCls}-column-sorters` : undefined}
798-
onClick={() => this.toggleSortOrder(column)}
799818
>
800819
{this.renderColumnTitle(column.title)}
801820
{sortButton}
802821
</div>,
803822
filterDropdown,
804823
],
824+
customHeaderCell,
805825
}
806-
// column.title = (
807-
// <span key={key}>
808-
// {column.title}
809-
// {sortButton}
810-
// {filterDropdown}
811-
// </span>
812-
// )
813-
814-
// if (sortButton || filterDropdown) {
815-
// column.className = classNames(`${prefixCls}-column-has-filters`, column.className)
816-
// }
817-
818-
// return column
819826
})
820827
},
821828
renderColumnTitle (title) {
@@ -829,6 +836,23 @@ export default {
829836
}
830837
return title
831838
},
839+
840+
getColumnTitle (title, parentNode) {
841+
if (!title) {
842+
return
843+
}
844+
if (isValidElement(title)) {
845+
debugger
846+
const props = title.props
847+
if (props && props.children) {
848+
const { children } = props
849+
return this.getColumnTitle(children, props)
850+
}
851+
} else {
852+
return parentNode.title || title
853+
}
854+
},
855+
832856
handleShowSizeChange (current, pageSize) {
833857
const pagination = this.sPagination
834858
pagination.onShowSizeChange(current, pageSize)
@@ -939,11 +963,11 @@ export default {
939963
},
940964

941965
getFlatData () {
942-
return flatArray(this.getLocalData())
966+
return flatArray(this.getLocalData(null, false))
943967
},
944968

945-
getFlatCurrentPageData () {
946-
return flatArray(this.getCurrentPageData())
969+
getFlatCurrentPageData (childrenColumnName) {
970+
return flatArray(this.getCurrentPageData(), childrenColumnName)
947971
},
948972

949973
recursiveSort (data, sorterFn) {
@@ -954,7 +978,7 @@ export default {
954978
} : item))
955979
},
956980

957-
getLocalData (state) {
981+
getLocalData (state, filter = true) {
958982
const currentState = state || this.$data
959983
const { sFilters: filters } = currentState
960984
const { dataSource } = this.$props
@@ -966,7 +990,7 @@ export default {
966990
data = this.recursiveSort(data, sorterFn)
967991
}
968992
// 筛选
969-
if (filters) {
993+
if (filter && filters) {
970994
Object.keys(filters).forEach((columnKey) => {
971995
const col = this.findColumn(columnKey)
972996
if (!col) {

‎components/table/demo/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const md = {
4949
## How To Use
5050
5151
Specify \`dataSource\` of Table as an array of data.
52-
## Examples
52+
## Examples
5353
`,
5454
}
5555
export default {

‎components/table/index.en-US.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const columns = [{
4444
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
4545
| expandedRowKeys | Current expanded row keys | string\[] | - |
4646
| expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):VNode\|slot-scope | - |
47+
| expandIcon | Customize row expand Icon. | Function(props):VNode \| slot="expandIcon" slot-scope="props" | - |
4748
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
4849
| footer | Table footer renderer | Function(currentPageData)\|slot-scope | |
4950
| indentSize | Indent size in pixels of tree data | number | 15 |
@@ -120,7 +121,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
120121
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
121122
| title | Title of this column | string\|slot | - |
122123
| width | Width of this column | string\|number | - |
123-
| customCell | Set props on per cell | Function(record) | - |
124+
| customCell | Set props on per cell | Function(record, rowIndex) | - |
124125
| customHeaderCell | Set props on per header cell | Function(column) | - |
125126
| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - |
126127
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - |

‎components/table/index.zh-CN.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ const columns = [{
4343
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |
4444
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
4545
| expandedRowKeys | 展开的行，控制属性 | string\[] | - |
46-
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode\|slot-scope| - |
46+
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode \| slot="expandedRowRender" slot-scope="record, index, indent, expanded" | - |
47+
| expandIcon | 自定义展开图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props" | - |
4748
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
4849
| footer | 表格尾部 | Function(currentPageData)\|slot-scope | |
4950
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
@@ -122,7 +123,7 @@ const columns = [{
122123
| title | 列头显示文字 | string\|slot | - |
123124
| width | 列宽度 | string\|number | - |
124125
| customCell | 设置单元格属性 | Function(record) | - |
125-
| customHeaderCell | 设置头部单元格属性 | Function(column) | - |
126+
| customHeaderCell | 设置头部单元格属性 | Function(column, rowIndex) | - |
126127
| onFilter | 本地模式下，确定筛选的运行函数, 使用template或jsx时作为`filter`事件使用 | Function | - |
127128
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用template或jsx时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - |
128129
| slots | 使用columns时，可以通过该属性配置支持slot的属性，如 `slots: { filterIcon: 'XXX'}` | object | - |

‎types/table/column.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,8 @@ export declare class Column extends AntdComponent {
133133
* @type Function
134134
*/
135135
customCell: (
136-
record: any
136+
record: any,
137+
rowIndex: number,
137138
) => {
138139
props: object;
139140
attrs: object;

‎types/table/table.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@ export declare class Table extends AntdComponent {
193193
expanded: boolean
194194
) => any;
195195

196+
/**
197+
* Customize row expand Icon.
198+
* @type Function | ScopedSlot
199+
*/
200+
expandIcon: Function | ScopedSlot;
201+
196202
/**
197203
* Whether to expand row by clicking anywhere in the whole row
198204
* @default false

0 commit comments

Comments
 (0)