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 table snap

pull/4499/head
tangjinzhou 2021-08-07 00:00:02 +08:00
parent 38569c28c7
commit 987c3872bf
8 changed files with 309 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

510
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

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

@ -12,11 +12,11 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col data-key="name">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class="ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
@ -40,8 +40,6 @@ exports[`Table.pagination renders pagination correctly 1`] = `
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<ul unselectable="unselectable" class="ant-pagination my-page ant-table-pagination">

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

@ -13,19 +13,19 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col class="ant-table-selection-col">
<col>
<col data-key="selection-column" class="ant-table-selection-col">
<col data-key="name">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class="ant-table-fixed-columns-in-body 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>
<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>
<!---->
</div></span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
<th class="ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
@ -33,7 +33,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column">
<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>
@ -44,7 +44,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column">
<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>
@ -55,7 +55,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column">
<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>
@ -66,7 +66,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column">
<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>
@ -82,62 +82,8 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<!---->
<!---->
</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 class="ant-table-selection-col">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class="ant-table-selection-column ant-table-row-cell-last"><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>
<!---->
</div></span><span class="ant-table-column-sorter"><!----></span>
</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"><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"><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"><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"><span class="ant-checkbox-inner"></span></span>
<!----></label></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!---->
</div>
</div>
<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
<!---->
<li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><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></a></li>

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

@ -3,7 +3,7 @@
exports[`Table.sorter renders sorter icon correctly 1`] = `
<thead class="ant-table-thead">
<tr>
<th class="ant-table-column-has-actions ant-table-column-has-sorters ant-table-row-cell-last"><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 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>
</tr>

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

@ -12,16 +12,16 @@ exports[`Table align column should not override cell style 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col>
<col data-key="name">
<col data-key="age">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th style="text-align: center;" class="ant-table-align-center ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
<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>
@ -55,8 +55,6 @@ exports[`Table align column should not override cell style 1`] = `
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
@ -83,27 +81,27 @@ exports[`Table renders JSX correctly 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col>
<col>
<col data-key="firstName">
<col data-key="lastName">
<col data-key="age">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th colspan="2" class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th rowspan="2" class="ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Age</span><span class="ant-table-column-sorter"><!----></span>
<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>
</tr>
<tr>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">First Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Last Name</span><span class="ant-table-column-sorter"><!----></span>
<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>
@ -143,8 +141,6 @@ exports[`Table renders JSX correctly 1`] = `
</div>
<!---->
<!---->
<!---->
<!---->
</div>
</div>
</div>

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

@ -12,45 +12,45 @@ exports[`Table renders empty table 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<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>
<thead class="ant-table-thead">
<tr>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
<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 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 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>
<th class="ant-table-row-cell-last"><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 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>
<!---->
</th>
</tr>
@ -74,8 +74,6 @@ exports[`Table renders empty table 1`] = `
</div>
</div>
<!---->
<!---->
<!---->
</div>
</div>
</div>
@ -95,45 +93,45 @@ exports[`Table renders empty table with custom emptyText 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<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>
<thead class="ant-table-thead">
<tr>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
<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 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 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>
<th class="ant-table-row-cell-last"><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 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>
<!---->
</th>
</tr>
@ -143,8 +141,6 @@ exports[`Table renders empty table with custom emptyText 1`] = `
</div>
<div class="ant-table-placeholder">custom empty text </div>
<!---->
<!---->
<!---->
</div>
</div>
</div>
@ -165,58 +161,58 @@ exports[`Table renders empty table with fixed columns 1`] = `
<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;">
<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;">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class="ant-table-fixed-columns-in-body 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>
<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>
<th class="ant-table-fixed-columns-in-body 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>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
<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 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 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>
<th 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 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>
<!---->
</th>
<th 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 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 class="ant-table-fixed-columns-in-body ant-table-row-cell-break-word ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Action</span><span class="ant-table-column-sorter"><!----></span></div></span>
<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>
<!---->
</th>
</tr>
@ -241,53 +237,6 @@ exports[`Table renders empty table with fixed columns 1`] = `
</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" style="width: 200px;">
<colgroup>
<col style="width: 100px; min-width: 100px;">
<col style="width: 100px; min-width: 100px;">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th 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>
<th class="ant-table-row-cell-break-word ant-table-row-cell-last"><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>
</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" style="width: 100px;">
<colgroup>
<col style="width: 100px; min-width: 100px;">
</colgroup>
<thead class="ant-table-thead">
<tr>
<th class="ant-table-row-cell-break-word ant-table-row-cell-last"><span class="ant-table-header-column"><div><span class="ant-table-column-title">Action</span><span class="ant-table-column-sorter"><!----></span>
</div></span>
<!---->
</th>
</tr>
</thead>
<tbody class="ant-table-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@ -311,45 +260,45 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
<div class="ant-table-body">
<table class="">
<colgroup>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<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>
<thead class="ant-table-thead">
<tr>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 1</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 2</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 3</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 4</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 5</span><span class="ant-table-column-sorter"><!----></span>
<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>
<th class=""><span class="ant-table-header-column"><div><span class="ant-table-column-title">Column 6</span><span class="ant-table-column-sorter"><!----></span>
<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 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 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>
<th class="ant-table-row-cell-last"><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 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>
<!---->
</th>
</tr>
@ -373,8 +322,6 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
</div>
</div>
<!---->
<!---->
<!---->
</div>
</div>
</div>

3
components/vc-table/src/Table.jsx
View File

@ -9,6 +9,7 @@ import {
ref,
onUpdated,
onMounted,
toRef,
} from 'vue';
import shallowequal from '../../_util/shallowequal';
import merge from 'lodash-es/merge';
@ -99,7 +100,7 @@ export default defineComponent({
},
),
setup(props) {
const columnManager = useColumnManager(props.columns);
const columnManager = useColumnManager(toRef(props, 'columns'));
const colsKeys = computed(() => getColumnsKey(columnManager.leafColumns.value));
const [colsWidths, updateColsWidths] = useLayoutState(new Map());
const pureColWidths = computed(() =>

18
components/vc-table/src/useColumnManager.jsx
View File

@ -23,7 +23,7 @@ export default function useColumnManager(columns) {
const rowSpan = rows.length - currentRow;
if (
column &&
!column.children && // parent columns are supposed to be one row
!column.children && // parent columns.value are supposed to be one row
rowSpan > 1 &&
(!column.rowSpan || column.rowSpan < rowSpan)
) {
@ -47,7 +47,7 @@ export default function useColumnManager(columns) {
} else {
parentColumn.colSpan += 1;
}
// update rowspan to all same row columns
// update rowspan to all same row columns.value
for (let i = 0; i < rows[currentRow].length - 1; i += 1) {
setRowSpan(rows[currentRow][i]);
}
@ -59,16 +59,18 @@ export default function useColumnManager(columns) {
});
return grouped;
};
return _groupColumns(columns);
return _groupColumns(columns.value);
});
const isAnyColumnsFixed = computed(() => columns.some(column => !!column.fixed));
const isAnyColumnsFixed = computed(() => columns.value.some(column => !!column.fixed));
const isAnyColumnsLeftFixed = computed(() =>
columns.some(column => column.fixed === 'left' || column.fixed === true),
columns.value.some(column => column.fixed === 'left' || column.fixed === true),
);
const isAnyColumnsRightFixed = computed(() => columns.some(column => column.fixed === 'right'));
const isAnyColumnsRightFixed = computed(() =>
columns.value.some(column => column.fixed === 'right'),
);
const leftColumns = computed(() =>
groupedColumns.value.filter(column => column.fixed === 'left' || column.fixed === true),
@ -78,7 +80,9 @@ export default function useColumnManager(columns) {
return groupedColumns.value.filter(column => column.fixed === 'right');
});
const leafColumns = computed(() => _leafColumns(columns));
const leafColumns = computed(() => {
return _leafColumns(columns.value);
});
const leftLeafColumns = computed(() => _leafColumns(leftColumns.value));