github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update snap

pull/4639/head
tangjinzhou 2021-09-09 23:33:02 +08:00
parent 16e801249c
commit d3acab2d55
9 changed files with 4807 additions and 5064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/table/Table.tsx
View File

@ -1,4 +1,4 @@
import RcTable, { Summary } from '../vc-table';
import RcTable from '../vc-table';
import type { TableProps as RcTableProps } from '../vc-table/Table';
import { INTERNAL_HOOKS } from '../vc-table/Table';
import type { SpinProps } from '../spin';
@ -23,11 +23,7 @@ import type {
TableAction,
FilterValue,
} from './interface';
import useSelection, {
SELECTION_ALL,
SELECTION_INVERT,
SELECTION_NONE,
} from './hooks/useSelection';
import useSelection from './hooks/useSelection';
import type { SortState } from './hooks/useSorter';
import useSorter, { getSortData } from './hooks/useSorter';
import type { FilterState } from './hooks/useFilter';
@ -36,8 +32,6 @@ import useTitleColumns from './hooks/useTitleColumns';
import renderExpandIcon from './ExpandIcon';
import scrollTo from '../_util/scrollTo';
import defaultLocale from '../locale/en_US';
import Column from './Column';
import ColumnGroup from './ColumnGroup';
import type { SizeType } from '../config-provider';
import devWarning from '../vc-util/devWarning';
import type { PropType } from 'vue';
@ -240,7 +234,7 @@ const InteralTable = defineComponent<
'customFilterIcon',
'customFilterDropdown',
],
setup(props, { attrs, slots, emit }) {
setup(props, { attrs, slots }) {
devWarning(
!(typeof props.rowKey === 'function' && props.rowKey.length > 1),
'Table',

33
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
View File

@ -5,44 +5,41 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<div class="ant-spin-nested-loading">
<!---->
<div class="ant-spin-container">
<div class="ant-table ant-table-default ant-table-scroll-position-left">
<div class="ant-table">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="name">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->Name
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td class="">
<!---->
<tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Jack
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="">
<!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Lucy
</td>
</tr>
<!---->
</tbody>
<!---->
</table>
</div>
<!---->
</div>
<!---->
</div>
</div>
<ul unselectable="on" class="ant-pagination my-page ant-table-pagination">
<ul unselectable="on" class="ant-pagination my-page">
<!---->
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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></svg></span></button></li>
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
@ -51,6 +48,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<!---->
</ul>
</div>
</div>
</div>
</div>
`;

87
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -5,94 +5,91 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<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 ant-table-has-fix-left">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<div class="ant-table-scroll">
<!---->
<div class="ant-table-body">
<table class="">
<table style="table-layout: auto;">
<colgroup>
<col data-key="selection-column" class="ant-table-selection-col">
<col data-key="name">
<col class="ant-table-selection-col">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class="ant-table-selection-column"><span class="ant-table-header-column"><div><span class="ant-table-column-title"><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----></label>
<th class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-selection-column" style="position: sticky; left: 0px;" colstart="0" colend="0">
<!---->
</div></span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
<!---->
</div>
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="1" colend="1">
<!---->Name
</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"><span class="ant-checkbox-inner"></span></span>
<!----></label></span>
<tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Jack
</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"><span class="ant-checkbox-inner"></span></span>
<!----></label></span>
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Lucy
</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"><span class="ant-checkbox-inner"></span></span>
<!----></label></span>
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Tom
</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"><span class="ant-checkbox-inner"></span></span>
<!----></label></span>
<tr data-row-key="3" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last ant-table-cell-with-append ant-table-selection-column" style="position: sticky; left: 0px;">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!---->
</label>
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Jerry
</td>
</tr>
<!---->
</tbody>
<!---->
</table>
</div>
<!---->
</div>
<!---->
</div>
</div>
</div>
<ul unselectable="on" class="ant-pagination ant-table-pagination">
<ul unselectable="on" class="ant-pagination ant-table-pagination ant-table-pagination-right">
<!---->
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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></svg></span></button></li>
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
<li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<!---->
</ul>
</div>
</div>
</ul>
</div>
</div>
</div>
`;

3
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -3,8 +3,9 @@
exports[`Table.sorter renders sorter icon correctly 1`] = `
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class="ant-table-column-has-actions ant-table-column-has-sorters"><span class="ant-table-header-column"><div class="ant-table-column-sorters"><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><div title="Sort" class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up off"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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></span></div></span></div></span>
<th class="ant-table-cell ant-table-column-has-sorters" colstart="0" colend="0">
<!---->
<div class="ant-table-column-sorters"><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"><svg focusable="false" class="" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg focusable="false" class="" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><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></span></span></span></div>
</th>
</tr>
</thead>

111
components/table/__tests__/__snapshots__/Table.test.js.snap
View File

@ -5,67 +5,60 @@ exports[`Table align column should not override cell style 1`] = `
<div class="ant-spin-nested-loading">
<!---->
<div class="ant-spin-container">
<div class="ant-table ant-table-default ant-table-scroll-position-left">
<div class="ant-table">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="name">
<col data-key="age">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->Name
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" style="text-align: center;" class="ant-table-align-center"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" style="text-align: center;" colstart="1" colend="1">
<!---->Age
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="">
<!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->
<!---->
</td>
<td class="" style="text-align: center; color: red;">
<!---->
<td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append">
<!---->32
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="">
<!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->
<!---->
</td>
<td class="" style="text-align: center; color: red;">
<!---->
<td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append">
<!---->42
</td>
</tr>
<!---->
</tbody>
<!---->
</table>
</div>
<!---->
</div>
<!---->
</div>
</div>
<ul unselectable="on" class="ant-pagination ant-table-pagination">
<ul unselectable="on" class="ant-pagination ant-table-pagination ant-table-pagination-right">
<!---->
<li title="Previous Page" class="ant-pagination-prev ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 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></svg></span></button></li>
<li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a rel="nofollow">1</a></li>
<li title="Next Page" class="ant-pagination-next ant-pagination-disabled" aria-disabled="true"><button class="ant-pagination-item-link" type="button" tabindex="-1" disabled=""><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></button></li>
<!---->
</ul>
</div>
</div>
</div>
</div>
</div>
`;
@ -74,76 +67,64 @@ exports[`Table renders JSX correctly 1`] = `
<div class="ant-spin-nested-loading">
<!---->
<div class="ant-spin-container">
<div class="ant-table ant-table-default ant-table-scroll-position-left">
<div class="ant-table">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="firstName">
<col data-key="lastName">
<col data-key="age">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" hassubcolumns="true" colspan="2" colend="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th colspan="2" class="ant-table-cell" colstart="0" hassubcolumns="true" colend="1">
<!---->Name
</th>
<th colstart="2" rowspan="2" colspan="1" colend="2" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th rowspan="2" class="ant-table-cell" colstart="2" colend="2">
<!---->Age
</th>
</tr>
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">First Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->First Name
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Last Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="1" colend="1">
<!---->Last Name
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="">
<!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->John
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Brown
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->32
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="">
<!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Jim
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->Green
</td>
<td class="">
<!---->
<td class="ant-table-cell ant-table-cell-with-append">
<!---->42
</td>
</tr>
<!---->
</tbody>
<!---->
</table>
</div>
</div>
<!---->
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

4607
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

410
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -5,79 +5,57 @@ exports[`Table renders empty table 1`] = `
<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">
<div class="ant-table ant-table-empty">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="1">
<col data-key="2">
<col data-key="3">
<col data-key="4">
<col data-key="5">
<col data-key="6">
<col data-key="7">
<col data-key="8">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->Column 1
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="1" colend="1">
<!---->Column 2
</th>
<th colstart="2" colspan="1" colend="2" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="2" colend="2">
<!---->Column 3
</th>
<th colstart="3" colspan="1" colend="3" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="3" colend="3">
<!---->Column 4
</th>
<th colstart="4" colspan="1" colend="4" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="4" colend="4">
<!---->Column 5
</th>
<th colstart="5" colspan="1" colend="5" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
<th colstart="6" colspan="1" colend="6" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 7</span><span class="ant-table-column-sorter"><!----></span></div></span>
<th class="ant-table-cell" colstart="5" colend="5">
<!---->Column 6
</th>
<th class="ant-table-cell" colstart="6" colend="6">
<!---->Column 7
</th>
<th class="ant-table-cell" colstart="7" colend="7">
<!---->Column 8
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<!---->
</th>
<th colstart="7" colspan="1" colend="7" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 8</span><span class="ant-table-column-sorter"><!----></span></div></span>
<tr class="ant-table-placeholder">
<td colspan="8" class="ant-table-cell">
<!---->
</th>
</tr>
</thead>
<tbody class="ant-table-tbody"></tbody>
</table>
</div>
<div class="ant-table-placeholder">
<div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p>
<!---->
</td>
</tr>
</tbody>
<!---->
</table>
</div>
</div>
<!---->
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
@ -86,65 +64,57 @@ exports[`Table renders empty table with custom emptyText 1`] = `
<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">
<div class="ant-table ant-table-empty">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="1">
<col data-key="2">
<col data-key="3">
<col data-key="4">
<col data-key="5">
<col data-key="6">
<col data-key="7">
<col data-key="8">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->Column 1
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="1" colend="1">
<!---->Column 2
</th>
<th colstart="2" colspan="1" colend="2" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="2" colend="2">
<!---->Column 3
</th>
<th colstart="3" colspan="1" colend="3" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="3" colend="3">
<!---->Column 4
</th>
<th colstart="4" colspan="1" colend="4" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="4" colend="4">
<!---->Column 5
</th>
<th colstart="5" colspan="1" colend="5" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
<th colstart="6" colspan="1" colend="6" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 7</span><span class="ant-table-column-sorter"><!----></span></div></span>
<th class="ant-table-cell" colstart="5" colend="5">
<!---->Column 6
</th>
<th class="ant-table-cell" colstart="6" colend="6">
<!---->Column 7
</th>
<th class="ant-table-cell" colstart="7" colend="7">
<!---->Column 8
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<!---->
</th>
<th colstart="7" colspan="1" colend="7" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 8</span><span class="ant-table-column-sorter"><!----></span></div></span>
<tr class="ant-table-placeholder">
<td colspan="8" class="ant-table-cell">
<!---->
</th>
</tr>
</thead>
<tbody class="ant-table-tbody"></tbody>
</table>
</div>
<div class="ant-table-placeholder">custom empty text </div>
<!---->
</div>
</div>
</div>
</div>
<!---->
</td>
</tr>
</tbody>
<!---->
</table>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
`;
@ -153,94 +123,78 @@ exports[`Table renders empty table with fixed columns 1`] = `
<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 ant-table-has-fix-left ant-table-has-fix-right ant-table-empty">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<div class="ant-table-scroll">
<!---->
<div class="ant-table-body">
<table class="">
<table style="table-layout: auto;">
<colgroup>
<col data-key="name" style="width: 100px; min-width: 100px;">
<col data-key="age" style="width: 100px; min-width: 100px;">
<col data-key="1">
<col data-key="2">
<col data-key="3">
<col data-key="4">
<col data-key="5">
<col data-key="6">
<col data-key="7">
<col data-key="8">
<col data-key="address" style="width: 100px; min-width: 100px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col style="width: 100px;">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class="ant-table-row-cell-break-word"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Full Name</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell ant-table-cell-fix-left" style="position: sticky; left: 0px;" colstart="0" colend="0">
<!---->Full Name
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class="ant-table-row-cell-break-word"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last" style="position: sticky; left: 0px;" colstart="1" colend="1">
<!---->Age
</th>
<th colstart="2" colspan="1" colend="2" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="2" colend="2">
<!---->Column 1
</th>
<th colstart="3" colspan="1" colend="3" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="3" colend="3">
<!---->Column 2
</th>
<th colstart="4" colspan="1" colend="4" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="4" colend="4">
<!---->Column 3
</th>
<th colstart="5" colspan="1" colend="5" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="5" colend="5">
<!---->Column 4
</th>
<th colstart="6" colspan="1" colend="6" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
<th colstart="7" colspan="1" colend="7" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span></div></span>
<th class="ant-table-cell" colstart="6" colend="6">
<!---->Column 5
</th>
<th class="ant-table-cell" colstart="7" colend="7">
<!---->Column 6
</th>
<th class="ant-table-cell" colstart="8" colend="8">
<!---->Column 7
</th>
<th class="ant-table-cell" colstart="9" colend="9">
<!---->Column 8
</th>
<th class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first" style="position: sticky; right: 0px;" colstart="10" colend="10">
<!---->Action
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<!---->
</th>
<th colstart="8" colspan="1" colend="8" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 7</span><span class="ant-table-column-sorter"><!----></span></div></span>
<tr class="ant-table-placeholder">
<td colspan="11" class="ant-table-cell">
<!---->
</th>
<th colstart="9" colspan="1" colend="9" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 8</span><span class="ant-table-column-sorter"><!----></span></div></span>
<!---->
</th>
<th colstart="10" colspan="1" colend="10" rowspan="1" class="ant-table-row-cell-break-word"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Action</span><span class="ant-table-column-sorter"><!----></span></div></span>
</td>
</tr>
</tbody>
<!---->
</th>
</tr>
</thead>
<tbody class="ant-table-tbody"></tbody>
</table>
</div>
<div class="ant-table-placeholder">
<div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p>
</table>
</div>
</div>
<!---->
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
@ -248,83 +202,61 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
<div class="ant-table-wrapper">
<div class="ant-spin-nested-loading">
<div>
<div class="ant-spin ant-spin-spinning ant-table-without-pagination ant-table-spin-holder"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
<div class="ant-spin ant-spin-spinning"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
<!---->
</div>
</div>
<div class="ant-spin-container ant-spin-blur">
<div class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left">
<div class="ant-table ant-table-empty">
<!---->
<div class="ant-table-container">
<div class="ant-table-content">
<!---->
<div class="ant-table-body">
<table class="">
<colgroup>
<col data-key="1">
<col data-key="2">
<col data-key="3">
<col data-key="4">
<col data-key="5">
<col data-key="6">
<col data-key="7">
<col data-key="8">
</colgroup>
<table style="table-layout: auto;">
<colgroup></colgroup>
<thead class="ant-table-thead">
<tr>
<th colstart="0" colspan="1" colend="0" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="0" colend="0">
<!---->Column 1
</th>
<th colstart="1" colspan="1" colend="1" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="1" colend="1">
<!---->Column 2
</th>
<th colstart="2" colspan="1" colend="2" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="2" colend="2">
<!---->Column 3
</th>
<th colstart="3" colspan="1" colend="3" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="3" colend="3">
<!---->Column 4
</th>
<th colstart="4" colspan="1" colend="4" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
<th class="ant-table-cell" colstart="4" colend="4">
<!---->Column 5
</th>
<th colstart="5" colspan="1" colend="5" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
<th colstart="6" colspan="1" colend="6" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 7</span><span class="ant-table-column-sorter"><!----></span></div></span>
<th class="ant-table-cell" colstart="5" colend="5">
<!---->Column 6
</th>
<th class="ant-table-cell" colstart="6" colend="6">
<!---->Column 7
</th>
<th class="ant-table-cell" colstart="7" colend="7">
<!---->Column 8
</th>
</tr>
</thead>
<tbody class="ant-table-tbody">
<!---->
</th>
<th colstart="7" colspan="1" colend="7" rowspan="1" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 8</span><span class="ant-table-column-sorter"><!----></span></div></span>
<tr class="ant-table-placeholder">
<td colspan="8" class="ant-table-cell">
<!---->
</th>
</tr>
</thead>
<tbody class="ant-table-tbody"></tbody>
</table>
</div>
<div class="ant-table-placeholder">
<div class="ant-empty ant-empty-normal">
<div class="ant-empty-image"><svg class="ant-empty-img-simple" width="64" height="41" viewBox="0 0 64 41">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="ant-empty-img-simple-ellipse" fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g class="ant-empty-img-simple-g" fill-rule="nonzero" stroke="#D9D9D9">
<path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
<path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA" class="ant-empty-img-simple-path"></path>
</g>
</g>
</svg></div>
<p class="ant-empty-description">No Data</p>
<!---->
</td>
</tr>
</tbody>
<!---->
</table>
</div>
</div>
<!---->
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

6
components/vc-table/FixedHolder/index.tsx
View File

@ -14,7 +14,7 @@ import {
} from 'vue';
import { useInjectTable } from '../context/TableContext';
import classNames from '../../_util/classNames';
import addEventListenerWrap from 'ant-design-vue/es/vc-util/Dom/addEventListener';
import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
function useColumnWidth(colWidthsRef: Ref<readonly number[]>, columCountRef: Ref<number>) {
return computed(() => {
@ -71,13 +71,13 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
tableContext.isSticky && !props.fixHeader ? 0 : tableContext.scrollbarSize,
);
const scrollRef = ref();
function onWheel(e: WheelEvent) {
const onWheel = (e: WheelEvent) => {
const { currentTarget, deltaX } = e;
if (deltaX) {
emit('scroll', { currentTarget, scrollLeft: (currentTarget as any).scrollLeft + deltaX });
e.preventDefault();
}
}
};
const wheelEvent = ref();
onMounted(() => {
nextTick(() => {

2
site/debugger/index.tsx
View File

@ -1,5 +1,5 @@
// debugger tsx
import Demo from '../../components/table/demo/summary.vue';
import Demo from '../../components/table/demo/index.vue';
export default {
render() {