feat: table sortTitle opt
tangjinzhou
parent
8340a0b684
commit
bbc6c29e69
|
|
@ -252,7 +252,7 @@ export function mergeProps () {
|
|||
}
|
||||
|
||||
function isValidElement (element) {
|
||||
return element && element.context && element.context._isVue
|
||||
return element && typeof element === 'object' && ('componentOptions' in element && 'context' in element)
|
||||
}
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import Column from './Column'
|
|||
import ColumnGroup from './ColumnGroup'
|
||||
import createBodyRow from './createBodyRow'
|
||||
import { flatArray, treeMap, flatFilter } from './util'
|
||||
import { initDefaultProps, mergeProps, getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util'
|
||||
import { initDefaultProps, mergeProps, getOptionProps, isValidElement, filterEmpty, getAllProps } from '../_util/props-util'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import {
|
||||
TableProps,
|
||||
|
|
@ -740,13 +740,7 @@ export default {
|
|||
let filterDropdown
|
||||
let sortButton
|
||||
let customHeaderCell = column.customHeaderCell
|
||||
const { slots } = column
|
||||
let title = column.title
|
||||
if (title === undefined && slots && slots.title) {
|
||||
title = this.$slots[slots.title]
|
||||
title = title && title[0]
|
||||
}
|
||||
const sortTitle = this.getColumnTitle(title, {}) || locale.sortTitle
|
||||
const sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle
|
||||
const isSortColumn = this.isSortColumn(column)
|
||||
if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
|
||||
const colFilters = key in filters ? filters[key] : []
|
||||
|
|
@ -842,11 +836,20 @@ export default {
|
|||
return
|
||||
}
|
||||
if (isValidElement(title)) {
|
||||
debugger
|
||||
const props = title.props
|
||||
if (props && props.children) {
|
||||
const { children } = props
|
||||
return this.getColumnTitle(children, props)
|
||||
const props = title.componentOptions
|
||||
let children = null
|
||||
if (props && props.children) { // for component
|
||||
children = filterEmpty(props.children)
|
||||
} else if (title.children) { // for dom
|
||||
children = filterEmpty(title.children)
|
||||
}
|
||||
if (children && children.length === 1) {
|
||||
children = children[0]
|
||||
const attrs = getAllProps(title)
|
||||
if (!children.tag && children.text) { // for textNode
|
||||
children = children.text
|
||||
}
|
||||
return this.getColumnTitle(children, attrs)
|
||||
}
|
||||
} else {
|
||||
return parentNode.title || title
|
||||
|
|
|
|||
|
|
@ -479,4 +479,149 @@ describe('Table.rowSelection', () => {
|
|||
expect(wrapper.findAll('thead tr div').at(0).text()).toBe('单选')
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/11384
|
||||
it('should keep item even if in filter', async () => {
|
||||
const filterColumns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [
|
||||
{
|
||||
text: 'Jack',
|
||||
value: 'Jack',
|
||||
},
|
||||
{
|
||||
text: 'Lucy',
|
||||
value: 'Lucy',
|
||||
},
|
||||
],
|
||||
filterDropdownVisible: true,
|
||||
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
||||
},
|
||||
]
|
||||
|
||||
const onChange = jest.fn()
|
||||
const rowSelection = {
|
||||
onChange,
|
||||
}
|
||||
|
||||
const wrapper = mount(Table, {
|
||||
propsData: {
|
||||
columns: filterColumns, dataSource: data, rowSelection: rowSelection,
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
|
||||
const dropdownWrapper = mount({
|
||||
render () {
|
||||
return wrapper.find({ name: 'Trigger' }).vm.getComponent()
|
||||
},
|
||||
}, { sync: false })
|
||||
|
||||
function clickItem () {
|
||||
wrapper
|
||||
.findAll('tbody .ant-table-selection-column .ant-checkbox-input')
|
||||
.at(0)
|
||||
.element.checked = true
|
||||
wrapper
|
||||
.findAll('tbody .ant-table-selection-column .ant-checkbox-input')
|
||||
.at(0)
|
||||
.trigger('change')
|
||||
}
|
||||
|
||||
// Check Jack
|
||||
dropdownWrapper
|
||||
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
||||
.at(0)
|
||||
.trigger('click')
|
||||
dropdownWrapper
|
||||
.find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
|
||||
.trigger('click')
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('tbody tr').length).toBe(1)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
clickItem()
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onChange.mock.calls[0][0].length).toBe(1)
|
||||
expect(onChange.mock.calls[0][1].length).toBe(1)
|
||||
})
|
||||
|
||||
await asyncExpect(() => {
|
||||
dropdownWrapper
|
||||
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
||||
.at(0)
|
||||
.trigger('click')
|
||||
})
|
||||
|
||||
await asyncExpect(() => {
|
||||
// Check Lucy
|
||||
dropdownWrapper
|
||||
.findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
|
||||
.at(1)
|
||||
.trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
dropdownWrapper
|
||||
.find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
|
||||
.trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('tbody tr').length).toBe(1)
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
clickItem()
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(onChange.mock.calls[1][0].length).toBe(2)
|
||||
expect(onChange.mock.calls[1][1].length).toBe(2)
|
||||
})
|
||||
})
|
||||
|
||||
it('render correctly when set childrenColumnName', async () => {
|
||||
const newDatas = [
|
||||
{
|
||||
key: 1,
|
||||
name: 'Jack',
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: 'John Brown',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: 'Lucy',
|
||||
children: [
|
||||
{
|
||||
key: 21,
|
||||
name: 'Lucy Brown',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const wrapper = mount(Table, {
|
||||
propsData: {
|
||||
columns: columns, dataSource: newDatas, rowSelection: {}, childrenColumnName: 'test',
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
|
||||
const checkboxes = wrapper.findAll('input')
|
||||
const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' })
|
||||
|
||||
checkboxes.at(1).element.checked = true
|
||||
checkboxes.at(1).trigger('change')
|
||||
expect(checkboxAll.vm.$data).toEqual({ indeterminate: true, checked: false })
|
||||
|
||||
checkboxes.at(2).element.checked = true
|
||||
checkboxes.at(2).trigger('change')
|
||||
await asyncExpect(() => {
|
||||
expect(checkboxAll.vm.$data).toEqual({ indeterminate: false, checked: true })
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
|||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-actions ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Name" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
|
|||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-actions ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Name" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -310,16 +310,18 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
|||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-actions ant-table-column-has-filters">
|
||||
<div>Name</div><i title="Filter menu" class="anticon anticon-smile-o ant-table-filter-icon ant-dropdown-trigger" style="color: rgb(170, 170, 170);"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path>
|
||||
<div>Name</div><i title="Filter menu" class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
|
||||
</svg></i>
|
||||
</th>
|
||||
<th key="age" class="">
|
||||
<div>Age</div>
|
||||
<th key="age" class="ant-table-column-has-actions ant-table-column-has-filters">
|
||||
<div>Age</div><i title="Filter menu" class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
|
||||
</svg></i>
|
||||
</th>
|
||||
<th key="address" class="ant-table-column-has-actions ant-table-column-has-filters">
|
||||
<div>Address</div><i title="Filter menu" class="anticon anticon-filter ant-dropdown-trigger"><svg viewBox="64 64 896 896" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"></path>
|
||||
<div>Address</div><i title="Filter menu" class="anticon anticon-search ant-table-filter-icon ant-dropdown-trigger"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
|
||||
</svg></i>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -328,25 +330,25 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
|
|||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->John Brown</td>
|
||||
<td>32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">New York No. 1 Lake Park</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Joe Black</td>
|
||||
<td>42</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">42</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">London No. 1 Lake Park</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jim Green</td>
|
||||
<td>32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">Sidney No. 1 Lake Park</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="4">
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jim Red</td>
|
||||
<td>32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">32</td>
|
||||
<td class="ant-table-column-has-actions ant-table-column-has-filters">London No. 2 Lake Park</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -1772,7 +1774,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
|
|||
</tr>
|
||||
<tr>
|
||||
<th key="age" rowspan="3" class="ant-table-column-has-actions ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Age" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2105,7 +2107,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
|||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Name" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2115,7 +2117,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
|||
</svg></i>
|
||||
</th>
|
||||
<th key="age" class="ant-table-column-has-actions ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Age" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2123,7 +2125,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
|
|||
</div>
|
||||
</th>
|
||||
<th key="address" class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Address" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2297,7 +2299,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
|||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Name" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2307,7 +2309,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
|||
</svg></i>
|
||||
</th>
|
||||
<th key="age" class="ant-table-column-has-actions ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Age" class="ant-table-column-sorters">Age<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
@ -2315,7 +2317,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
|||
</div>
|
||||
</th>
|
||||
<th key="address" class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters">
|
||||
<div title="Sort" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div title="Address" class="ant-table-column-sorters">Address<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
|
||||
</svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,33 @@ Implement a customized column search example via `filterDropdown`.
|
|||
```html
|
||||
<template>
|
||||
<a-table :dataSource="data" :columns="columns">
|
||||
<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters }" class='custom-filter-dropdown'>
|
||||
<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class='custom-filter-dropdown'>
|
||||
<a-input
|
||||
ref="searchInput"
|
||||
placeholder='Search name'
|
||||
:placeholder="`Search ${column.dataIndex}`"
|
||||
:value="selectedKeys[0]"
|
||||
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
|
||||
@pressEnter="() => handleSearch(selectedKeys, confirm)"
|
||||
style="width: 188px; margin-bottom: 8px; display: block;"
|
||||
/>
|
||||
<a-button type='primary' @click="() => handleSearch(selectedKeys, confirm)">Search</a-button>
|
||||
<a-button @click="() => handleReset(clearFilters)">Reset</a-button>
|
||||
<a-button
|
||||
type='primary'
|
||||
@click="() => handleSearch(selectedKeys, confirm)"
|
||||
icon="search"
|
||||
size="small"
|
||||
style="width: 90px; margin-right: 8px"
|
||||
>Search</a-button>
|
||||
<a-button
|
||||
@click="() => handleReset(clearFilters)"
|
||||
size="small"
|
||||
style="width: 90px"
|
||||
>Reset</a-button>
|
||||
</div>
|
||||
<a-icon slot="filterIcon" slot-scope="filtered" type='smile-o' :style="{ color: filtered ? '#108ee9' : '#aaa' }" />
|
||||
<a-icon slot="filterIcon" slot-scope="filtered" type='search' :style="{ color: filtered ? '#108ee9' : undefined }" />
|
||||
<template slot="customRender" slot-scope="text">
|
||||
<span v-if="searchText">
|
||||
<template v-for="(fragment, i) in text.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
|
||||
<span v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</span>
|
||||
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))">
|
||||
<mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i" class="highlight">{{fragment}}</mark>
|
||||
<template v-else>{{fragment}}</template>
|
||||
</template>
|
||||
</span>
|
||||
|
|
@ -84,18 +95,22 @@ export default {
|
|||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
scopedSlots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'customRender',
|
||||
},
|
||||
onFilter: (value, record) => record.age.toLowerCase().includes(value.toLowerCase()),
|
||||
}, {
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
filters: [{
|
||||
text: 'London',
|
||||
value: 'London',
|
||||
}, {
|
||||
text: 'New York',
|
||||
value: 'New York',
|
||||
}],
|
||||
onFilter: (value, record) => record.address.indexOf(value) === 0,
|
||||
scopedSlots: {
|
||||
filterDropdown: 'filterDropdown',
|
||||
filterIcon: 'filterIcon',
|
||||
customRender: 'customRender',
|
||||
},
|
||||
onFilter: (value, record) => record.address.toLowerCase().includes(value.toLowerCase()),
|
||||
}],
|
||||
}
|
||||
},
|
||||
|
|
@ -115,22 +130,14 @@ export default {
|
|||
<style scoped>
|
||||
.custom-filter-dropdown {
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.custom-filter-dropdown input {
|
||||
width: 130px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.custom-filter-dropdown button {
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #f50;
|
||||
background-color: rgb(255, 192, 105);
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ export default {
|
|||
const filtered = selectedKeys && selectedKeys.length > 0
|
||||
let filterIcon = column.filterIcon
|
||||
if (typeof filterIcon === 'function') {
|
||||
filterIcon = filterIcon(filtered)
|
||||
filterIcon = filterIcon(filtered, column)
|
||||
}
|
||||
const dropdownIconClass = classNames({
|
||||
[`${prefixCls}-selected`]: filtered,
|
||||
|
|
@ -215,7 +215,7 @@ export default {
|
|||
on: {
|
||||
click: stopPropagation,
|
||||
},
|
||||
class: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.className),
|
||||
class: classNames(`${prefixCls}-icon`, dropdownIconClass),
|
||||
})
|
||||
: <Icon
|
||||
title={locale.filterTitle}
|
||||
|
|
@ -244,6 +244,7 @@ export default {
|
|||
clearFilters: this.handleClearFilters,
|
||||
filters: column.filters,
|
||||
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
||||
column,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -107,11 +107,11 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
|||
| colSpan | Span of this column's title | number | |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
|
||||
| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |
|
||||
| filterDropdown | Customized filter overlay | slot | - |
|
||||
| filterDropdown | Customized filter overlay | slot \| slot-scope | - |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
|
||||
| filtered | Whether the `dataSource` is filtered | boolean | `false` |
|
||||
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
|
||||
| filterIcon | Customized filter icon | slot \| slot-scope \| (filtered: boolean) | `false` |
|
||||
| filterIcon | Customized filter icon | slot \| slot-scope \| (filtered: boolean, column: Column) | `false` |
|
||||
| filterMultiple | Whether multiple filters can be selected | boolean | `true` |
|
||||
| filters | Filter menu config | object\[] | - |
|
||||
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ const Table = {
|
|||
Object.keys(slots).forEach(key => {
|
||||
const name = slots[key]
|
||||
if (column[key] === undefined && $slots[name]) {
|
||||
column[key] = $slots[name]
|
||||
column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name]
|
||||
}
|
||||
})
|
||||
Object.keys(scopedSlots).forEach(key => {
|
||||
|
|
|
|||
|
|
@ -108,11 +108,11 @@ const columns = [{
|
|||
| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | |
|
||||
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode\|slot | - |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode \| slot-scope | - |
|
||||
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
|
||||
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
|
||||
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
|
||||
| filterIcon | 自定义 fiter 图标。 | VNode \| (filtered: boolean) => vNode \|slot \|slot-scope | false |
|
||||
| filterIcon | 自定义 fiter 图标。 | VNode \| (filtered: boolean, column: Column) => vNode \|slot \|slot-scope | false |
|
||||
| filterMultiple | 是否多选 | boolean | true |
|
||||
| filters | 表头的筛选菜单项 | object\[] | - |
|
||||
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@ exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`
|
|||
|
||||
exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`] = `<div style="overflow: hidden; position: relative; padding: 24px; border: 1px solid #e9e9e9;"><button type="button" class="ant-btn ant-btn-default"><span>Adjust automatically / 自动调整</span></button> <br> <button type="button" class="ant-btn ant-btn-default" style="margin-top: 10px;"><span>Ingore / 不处理</span></button></div>`;
|
||||
|
||||
exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
|
||||
<span class="">
|
||||
Tooltip will show when mouse enter.
|
||||
</span>
|
||||
`;
|
||||
exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `undefined`;
|
||||
|
||||
exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
|
||||
<div id="components-a-tooltip-demo-placement">
|
||||
|
|
|
|||
Loading…
Reference in New Issue