feat: update table
tangjinzhou
parent
e464fa5f9f
commit
0a1c680996
|
|
@ -335,7 +335,7 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
toggleSortOrder (order, column) {
|
||||
toggleSortOrder (column) {
|
||||
if (!column.sorter) {
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -220,7 +220,14 @@ describe('Table.filter', () => {
|
|||
dropdownWrapper.find('.confirm').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(handleChange).toBeCalledWith({}, { name: ['boy'] }, {})
|
||||
expect(handleChange).toBeCalledWith(
|
||||
{},
|
||||
{ name: ['boy'] },
|
||||
{},
|
||||
{
|
||||
currentDataSource: [],
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,15 @@ describe('Table.pagination', () => {
|
|||
pageSize: 2,
|
||||
},
|
||||
{},
|
||||
{}
|
||||
{},
|
||||
{
|
||||
currentDataSource: [
|
||||
{ key: 0, name: 'Jack' },
|
||||
{ key: 1, name: 'Lucy' },
|
||||
{ key: 2, name: 'Tom' },
|
||||
{ key: 3, name: 'Jerry' },
|
||||
],
|
||||
},
|
||||
)
|
||||
|
||||
expect(handlePaginationChange).toBeCalledWith(2, 2)
|
||||
|
|
|
|||
|
|
@ -413,4 +413,70 @@ describe('Table.rowSelection', () => {
|
|||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/10629
|
||||
it('should keep all checked state when remove item from dataSource', async () => {
|
||||
const wrapper = mount(Table, {
|
||||
propsData: {
|
||||
columns,
|
||||
dataSource: data,
|
||||
rowSelection: {
|
||||
selectedRowKeys: [0, 1, 2, 3],
|
||||
},
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll({ name: 'ACheckbox' }).length).toBe(5)
|
||||
const allCheckbox = wrapper.findAll({ name: 'ACheckbox' })
|
||||
Array(allCheckbox.length).forEach((_, index) => {
|
||||
const checkbox = allCheckbox.at(index)
|
||||
expect(checkbox.vm.checked).toBe(true)
|
||||
expect(checkbox.vm.indeterminate).toBe(false)
|
||||
})
|
||||
wrapper.setProps({
|
||||
dataSource: data.slice(1),
|
||||
rowSelection: {
|
||||
selectedRowKeys: [1, 2, 3],
|
||||
},
|
||||
})
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll({ name: 'ACheckbox' }).length).toBe(4)
|
||||
const allCheckbox = wrapper.findAll({ name: 'ACheckbox' })
|
||||
Array(allCheckbox.length).forEach((_, index) => {
|
||||
const checkbox = allCheckbox.at(index)
|
||||
expect(checkbox.vm.checked).toBe(true)
|
||||
expect(checkbox.vm.indeterminate).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/11042
|
||||
it('add columnTitle for rowSelection', async () => {
|
||||
const wrapper = mount(Table, {
|
||||
propsData: {
|
||||
columns,
|
||||
dataSource: data,
|
||||
rowSelection: {
|
||||
columnTitle: '多选',
|
||||
},
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('thead tr div').at(0).text()).toBe('多选')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.setProps({
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
columnTitle: '单选',
|
||||
},
|
||||
})
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('thead tr div').at(0).text()).toBe('单选')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -75,14 +75,18 @@ describe('Table.sorter', () => {
|
|||
it('sort records', async () => {
|
||||
const wrapper = mount(Table, getTableOptions())
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('.ant-table-column-sorter-up').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
|
||||
wrapper.find('.ant-table-column-sorter-down').trigger('click')
|
||||
// descent
|
||||
wrapper.find('.ant-table-column-sorters').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry'].join(''))
|
||||
|
||||
// ascent
|
||||
wrapper.find('.ant-table-column-sorters').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
// expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'])
|
||||
expect(wrapper.find('.ant-table-tbody').text()).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom'].join(''))
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -96,18 +100,34 @@ describe('Table.sorter', () => {
|
|||
})
|
||||
})
|
||||
|
||||
it('fires change event', (done) => {
|
||||
it('fires change event', async () => {
|
||||
const handleChange = jest.fn()
|
||||
const wrapper = mount(Table, getTableOptions({}, {}, { change: handleChange }))
|
||||
|
||||
wrapper.find('.ant-table-column-sorter-up').trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
const sorter = handleChange.mock.calls[0][2]
|
||||
expect(sorter.column.dataIndex).toBe('name')
|
||||
expect(sorter.order).toBe('ascend')
|
||||
expect(sorter.field).toBe('name')
|
||||
expect(sorter.columnKey).toBe('name')
|
||||
done()
|
||||
wrapper.find('.ant-table-column-sorters').trigger('click')
|
||||
await asyncExpect(() => {
|
||||
const sorter1 = handleChange.mock.calls[0][2]
|
||||
expect(sorter1.column.dataIndex).toBe('name')
|
||||
expect(sorter1.order).toBe('descend')
|
||||
expect(sorter1.field).toBe('name')
|
||||
expect(sorter1.columnKey).toBe('name')
|
||||
})
|
||||
wrapper.find('.ant-table-column-sorters').trigger('click')
|
||||
await asyncExpect(() => {
|
||||
const sorter2 = handleChange.mock.calls[1][2]
|
||||
expect(sorter2.column.dataIndex).toBe('name')
|
||||
expect(sorter2.order).toBe('ascend')
|
||||
expect(sorter2.field).toBe('name')
|
||||
expect(sorter2.columnKey).toBe('name')
|
||||
})
|
||||
|
||||
wrapper.find('.ant-table-column-sorters').trigger('click')
|
||||
await asyncExpect(() => {
|
||||
const sorter3 = handleChange.mock.calls[2][2]
|
||||
expect(sorter3.column).toBe(undefined)
|
||||
expect(sorter3.order).toBe(undefined)
|
||||
expect(sorter3.field).toBe(undefined)
|
||||
expect(sorter3.columnKey).toBe(undefined)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`Table.filter renders custom content correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomRight" style="display: none;">
|
||||
<div class="ant-dropdown-content">
|
||||
<div class="custom-filter-dropdown">custom filter</div>
|
||||
</div>
|
||||
|
|
@ -11,26 +11,21 @@ exports[`Table.filter renders custom content correctly 1`] = `
|
|||
`;
|
||||
|
||||
exports[`Table.filter renders filter correctly 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col></colgroup><thead class="ant-table-thead"><tr><th key="name" class="ant-table-column-has-filters"><span>Name<i 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="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z"></path></svg></i></span></th>
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col></colgroup><thead class="ant-table-thead"><tr><th key="name" class="ant-table-column-has-actions ant-table-column-has-filters"><div>Name</div><i 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></svg></i></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><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>
|
||||
<!---->Jack</td>
|
||||
</tr>
|
||||
<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>
|
||||
<!---->Lucy</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>
|
||||
<!---->Tom</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>
|
||||
<!---->Jerry</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
|
||||
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jack</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Lucy</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Tom</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
|
||||
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jerry</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -41,7 +36,7 @@ exports[`Table.filter renders filter correctly 1`] = `
|
|||
|
||||
exports[`Table.filter renders menu correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomRight" style="display: none;">
|
||||
<div class="ant-table-filter-dropdown ant-dropdown-content">
|
||||
<ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
|
||||
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label><span>Boy</span></li>
|
||||
|
|
@ -58,7 +53,7 @@ exports[`Table.filter renders menu correctly 1`] = `
|
|||
|
||||
exports[`Table.filter renders radio filter correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomLeft" style="display: none;">
|
||||
<div class="ant-dropdown ant-dropdown-placement-bottomRight" style="display: none;">
|
||||
<div class="ant-table-filter-dropdown ant-dropdown-content">
|
||||
<ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root">
|
||||
<li role="menuitem" class="ant-dropdown-menu-item"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value=""><span class="ant-radio-inner"></span></span></label><span>Boy</span></li>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col></colgroup><thead class="ant-table-thead"><tr><th key="name" class=""><span>Name</span></th>
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col></colgroup><thead class="ant-table-thead"><tr><th key="name" class=""><div>Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="0"><td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jack</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Lucy</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jack</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Lucy</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col><col></colgroup><thead class="ant-table-thead"><tr><th key="selection-column" class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></div></span></th>
|
||||
<th key="name" class=""><span>Name</span></th>
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col><col></colgroup><thead class="ant-table-thead"><tr><th key="selection-column" class="ant-table-fixed-columns-in-body ant-table-selection-column"><div><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></div>
|
||||
</div>
|
||||
</th>
|
||||
<th key="name" class="">
|
||||
<div>Name</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
|
|
@ -40,30 +44,33 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
|||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label>
|
||||
</div></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<th key="selection-column" class="ant-table-selection-column">
|
||||
<div>
|
||||
<div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
|
||||
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
|
||||
<li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev"><a class="ant-pagination-item-link"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,14 @@
|
|||
exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class="ant-table-column-has-filters"><span>Name<div class="ant-table-column-sorter"><span title="↑" class="ant-table-column-sorter-up off"><i class="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></span><span title="↓" class="ant-table-column-sorter-down off"><i class="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></svg></i></span></div></span></th>
|
||||
<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="">
|
||||
<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>
|
||||
</svg></i></div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table renders JSX correctly 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><span>Name</span></th>
|
||||
<th key="age" rowspan="2" class=""><span>Age</span></th>
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="0" colspan="2" class=""><div>Name</div></th><th key="age" rowspan="2" class=""><div>Age</div></th></tr><tr><th key="firstName" class=""><div>First Name</div></th><th key="lastName" class=""><div>Last Name</div></th></tr></thead><tbody class="ant-table-tbody"><tr class="ant-table-row ant-table-row-level-0" data-row-key="1"><td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->John</td>
|
||||
<td>Brown</td>
|
||||
<td>32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th key="firstName" class=""><span>First Name</span></th>
|
||||
<th key="lastName" class=""><span>Last Name</span></th>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jim</td>
|
||||
<td>Green</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody">
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->John</td>
|
||||
<td>Brown</td>
|
||||
<td>32</td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
|
||||
<!---->Jim</td>
|
||||
<td>Green</td>
|
||||
<td>42</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,106 +1,10 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table renders empty table 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">No data</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></span></div>
|
||||
`;
|
||||
exports[`Table renders empty table 1`] = `<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><div>Column 1</div></th><th key="2" class=""><div>Column 2</div></th><th key="3" class=""><div>Column 3</div></th><th key="4" class=""><div>Column 4</div></th><th key="5" class=""><div>Column 5</div></th><th key="6" class=""><div>Column 6</div></th><th key="7" class=""><div>Column 7</div></th><th key="8" class=""><div>Column 8</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div><div class="ant-table-placeholder">No data</div></div></div></div></span></div>`;
|
||||
|
||||
exports[`Table renders empty table with custom emptyText 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">custom empty text </div>
|
||||
</div>
|
||||
</div>
|
||||
</div></span></div>
|
||||
`;
|
||||
exports[`Table renders empty table with custom emptyText 1`] = `<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-scroll-position-left ant-table-default ant-table-empty"><div class="ant-table-content"><!----><div class="ant-table-body"><table class=""><colgroup><col><col><col><col><col><col><col><col></colgroup><thead class="ant-table-thead"><tr><th key="1" class=""><div>Column 1</div></th><th key="2" class=""><div>Column 2</div></th><th key="3" class=""><div>Column 3</div></th><th key="4" class=""><div>Column 4</div></th><th key="5" class=""><div>Column 5</div></th><th key="6" class=""><div>Column 6</div></th><th key="7" class=""><div>Column 7</div></th><th key="8" class=""><div>Column 8</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div><div class="ant-table-placeholder">custom empty text </div></div></div></div></span></div>`;
|
||||
|
||||
exports[`Table renders empty table with fixed columns 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col style="width: 100px; min-width: 100px;"><col style="width: 100px; min-width: 100px;"><col><col><col><col><col><col><col><col><col style="width: 100px; min-width: 100px;"></colgroup><thead class="ant-table-thead"><tr><th key="name" class="ant-table-fixed-columns-in-body"><span>Full Name</span></th>
|
||||
<th key="age" class="ant-table-fixed-columns-in-body"><span>Age</span></th>
|
||||
<th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
<th key="address" class="ant-table-fixed-columns-in-body"><span>Action</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ant-table-placeholder">No data</div>
|
||||
</div>
|
||||
<div class="ant-table-fixed-left">
|
||||
<!---->
|
||||
<div class="ant-table-body-outer">
|
||||
<div class="ant-table-body-inner">
|
||||
<table class="ant-table-fixed">
|
||||
<colgroup>
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="name" class=""><span>Full Name</span></th>
|
||||
<th key="age" class=""><span>Age</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-table-fixed-right">
|
||||
<!---->
|
||||
<div class="ant-table-body-outer">
|
||||
<div class="ant-table-body-inner">
|
||||
<table class="ant-table-fixed">
|
||||
<colgroup>
|
||||
<col style="width: 100px; min-width: 100px;">
|
||||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="address" class=""><span>Action</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></span></div>
|
||||
`;
|
||||
exports[`Table renders empty table with fixed columns 1`] = `<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col style="width: 100px; min-width: 100px;"><col style="width: 100px; min-width: 100px;"><col><col><col><col><col><col><col><col><col style="width: 100px; min-width: 100px;"></colgroup><thead class="ant-table-thead"><tr><th key="name" class="ant-table-fixed-columns-in-body"><div>Full Name</div></th><th key="age" class="ant-table-fixed-columns-in-body"><div>Age</div></th><th key="1" class=""><div>Column 1</div></th><th key="2" class=""><div>Column 2</div></th><th key="3" class=""><div>Column 3</div></th><th key="4" class=""><div>Column 4</div></th><th key="5" class=""><div>Column 5</div></th><th key="6" class=""><div>Column 6</div></th><th key="7" class=""><div>Column 7</div></th><th key="8" class=""><div>Column 8</div></th><th key="address" class="ant-table-fixed-columns-in-body"><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div><div class="ant-table-placeholder">No data</div></div><div class="ant-table-fixed-left"><!----><div class="ant-table-body-outer"><div class="ant-table-body-inner"><table class="ant-table-fixed"><colgroup><col style="width: 100px; min-width: 100px;"><col style="width: 100px; min-width: 100px;"></colgroup><thead class="ant-table-thead"><tr><th key="name" class=""><div>Full Name</div></th><th key="age" class=""><div>Age</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div></div></div><div class="ant-table-fixed-right"><!----><div class="ant-table-body-outer"><div class="ant-table-body-inner"><table class="ant-table-fixed"><colgroup><col style="width: 100px; min-width: 100px;"></colgroup><thead class="ant-table-thead"><tr><th key="address" class=""><div>Action</div></th></tr></thead><tbody class="ant-table-tbody"></tbody></table></div></div></div></div></div></div></span></div>`;
|
||||
|
||||
exports[`Table renders empty table without emptyText when loading 1`] = `
|
||||
<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading ant-table-without-pagination ant-table-spin-holder"><div><div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span></div>
|
||||
|
|
@ -123,14 +27,30 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
|
|||
</colgroup>
|
||||
<thead class="ant-table-thead">
|
||||
<tr>
|
||||
<th key="1" class=""><span>Column 1</span></th>
|
||||
<th key="2" class=""><span>Column 2</span></th>
|
||||
<th key="3" class=""><span>Column 3</span></th>
|
||||
<th key="4" class=""><span>Column 4</span></th>
|
||||
<th key="5" class=""><span>Column 5</span></th>
|
||||
<th key="6" class=""><span>Column 6</span></th>
|
||||
<th key="7" class=""><span>Column 7</span></th>
|
||||
<th key="8" class=""><span>Column 8</span></th>
|
||||
<th key="1" class="">
|
||||
<div>Column 1</div>
|
||||
</th>
|
||||
<th key="2" class="">
|
||||
<div>Column 2</div>
|
||||
</th>
|
||||
<th key="3" class="">
|
||||
<div>Column 3</div>
|
||||
</th>
|
||||
<th key="4" class="">
|
||||
<div>Column 4</div>
|
||||
</th>
|
||||
<th key="5" class="">
|
||||
<div>Column 5</div>
|
||||
</th>
|
||||
<th key="6" class="">
|
||||
<div>Column 6</div>
|
||||
</th>
|
||||
<th key="7" class="">
|
||||
<div>Column 7</div>
|
||||
</th>
|
||||
<th key="8" class="">
|
||||
<div>Column 8</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="ant-table-tbody"></tbody>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Table with editable cells.
|
|||
<a-button class="editable-add-btn" @click="handleAdd">Add</a-button>
|
||||
<a-table bordered :dataSource="dataSource" :columns="columns">
|
||||
<template slot="name" slot-scope="text, record">
|
||||
<EditableCell :text="text" @change="onCellChange(record.key, 'name')"/>
|
||||
<editable-cell :text="text" @change="onCellChange(record.key, 'name')"/>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="text, record">
|
||||
<a-popconfirm
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<cn>
|
||||
#### 树形数据展示
|
||||
表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。
|
||||
表格支持树形数据的展示，当数据中有 `children` 字段时会自动展示为树形表格，如果不需要或配置为其他字段可以用 `childrenColumnName` 进行配置。
|
||||
可以通过设置 `indentSize` 以控制每一层的缩进宽度。
|
||||
> 注：暂不支持父子数据递归关联选择。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Tree data
|
||||
Display tree structure data in Table, control the indent width by setting `indentSize`.
|
||||
Display tree structure data in Table when there is field key `children` in dataSource, try to customize `childrenColumnName` property to avoid tree table structure.
|
||||
You can control the indent width by setting `indentSize`.
|
||||
> Note, no support for recursive selection of tree structure data table yet.
|
||||
</us>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<cn>
|
||||
#### 筛选和排序
|
||||
对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
|
||||
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
|
||||
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(rowA, rowB) { ... }`， rowA、rowB 为比较的两个行数据。
|
||||
使用 `defaultSortOrder` 属性，设置列的默认排序顺序。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
|
|
|
|||
|
|
@ -100,37 +100,4 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child {
|
||||
padding: 0 48px 0 8px;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-thead th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row > td:last-child .ant-table-row td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-row:last-child td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row .ant-table-thead > tr > th {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .table-operation a:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.components-table-demo-nested .ant-table-expanded-row:hover > td {
|
||||
background: #fbfbfb;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,9 +15,6 @@ import BaseMixin from '../_util/BaseMixin'
|
|||
|
||||
function stopPropagation (e) {
|
||||
e.stopPropagation()
|
||||
if (e.nativeEvent.stopImmediatePropagation) {
|
||||
e.nativeEvent.stopImmediatePropagation()
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in New Issue