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

fix: expand icon not fixed

pull/4671/head
tangjinzhou 2021-09-13 10:54:16 +08:00
parent b32053b2ec
commit 3610140413
11 changed files with 896 additions and 879 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/alert/__tests__/__snapshots__/demo.test.js.snap
View File

@ -94,7 +94,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-success" data-show="true"> <div class="ant-alert ant-alert-success" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Success Tips</div> <div class="ant-alert-message">Success Tips</div>
<div class="ant-alert-description"> <div class="ant-alert-description">
@ -103,7 +103,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-info" data-show="true"> <div class="ant-alert ant-alert-info" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Informational Notes</div> <div class="ant-alert-message">Informational Notes</div>
<div class="ant-alert-description"> <div class="ant-alert-description">
@ -112,7 +112,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-warning" data-show="true"> <div class="ant-alert ant-alert-warning" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Warning</div> <div class="ant-alert-message">Warning</div>
<div class="ant-alert-description"> <div class="ant-alert-description">
@ -121,7 +121,7 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-error" data-show="true"> <div class="ant-alert ant-alert-error" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Error</div> <div class="ant-alert-message">Error</div>
<div class="ant-alert-description"> <div class="ant-alert-description">
@ -130,28 +130,28 @@ exports[`renders ./components/alert/demo/custom-icon.vue correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"> <div class="ant-alert ant-alert-success ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Success Tips</div> <div class="ant-alert-message">Success Tips</div>
<div class="ant-alert-description">Detailed description and advices about successful copywriting.</div> <div class="ant-alert-description">Detailed description and advices about successful copywriting.</div>
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"> <div class="ant-alert ant-alert-info ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Informational Notes</div> <div class="ant-alert-message">Informational Notes</div>
<div class="ant-alert-description">Additional description and informations about copywriting.</div> <div class="ant-alert-description">Additional description and informations about copywriting.</div>
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"> <div class="ant-alert ant-alert-warning ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Warning</div> <div class="ant-alert-message">Warning</div>
<div class="ant-alert-description">This is a warning notice about copywriting.</div> <div class="ant-alert-description">This is a warning notice about copywriting.</div>
</div> </div>
<!----> <!---->
</div> </div>
<div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"> <div class="ant-alert ant-alert-error ant-alert-with-description" data-show="true"><span role="img" aria-label="smile" class="anticon anticon-smile ant-alert-icon"><svg focusable="false" class="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg></span>
<div class="ant-alert-content"> <div class="ant-alert-content">
<div class="ant-alert-message">Error</div> <div class="ant-alert-message">Error</div>
<div class="ant-alert-description">This is an error message about copywriting.</div> <div class="ant-alert-description">This is an error message about copywriting.</div>

5
components/alert/index.tsx
View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes } from 'vue'; import type { ExtractPropTypes } from 'vue';
import { inject, cloneVNode, defineComponent, ref } from 'vue'; import { inject, defineComponent, ref } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@ -15,6 +15,7 @@ import { getTransitionProps, Transition } from '../_util/transition';
import { isValidElement, getPropsSlot } from '../_util/props-util'; import { isValidElement, getPropsSlot } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import { tuple, withInstall } from '../_util/type'; import { tuple, withInstall } from '../_util/type';
import { cloneElement } from '../_util/vnode';
function noop() {} function noop() {}
@ -139,7 +140,7 @@ const Alert = defineComponent({
const iconNode = (icon && const iconNode = (icon &&
(isValidElement(icon) ? ( (isValidElement(icon) ? (
cloneVNode(icon, { cloneElement(icon, {
class: `${prefixCls}-icon`, class: `${prefixCls}-icon`,
}) })
) : ( ) : (

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

@ -21,13 +21,13 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="0" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Jack <!---->Jack
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0"> <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 class="ant-table-cell">
<!---->Lucy <!---->Lucy
</td> </td>
</tr> </tr>

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

@ -31,45 +31,45 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="0" class="ant-table-row ant-table-row-level-0"> <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;"> <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last 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 class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Jack <!---->Jack
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0"> <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;"> <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last 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 class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Lucy <!---->Lucy
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0"> <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;"> <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last 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 class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Tom <!---->Tom
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="3" class="ant-table-row ant-table-row-level-0"> <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;"> <td class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last 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 class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Jerry <!---->Jerry
</td> </td>
</tr> </tr>

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

@ -24,21 +24,21 @@ exports[`Table align column should not override cell style 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0"> <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 class="ant-table-cell">
<!----> <!---->
<!----> <!---->
</td> </td>
<td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append"> <td style="color: red; text-align: center;" class="ant-table-cell">
<!---->32 <!---->32
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0"> <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 class="ant-table-cell">
<!----> <!---->
<!----> <!---->
</td> </td>
<td style="color: red; text-align: center;" class="ant-table-cell ant-table-cell-with-append"> <td style="color: red; text-align: center;" class="ant-table-cell">
<!---->42 <!---->42
</td> </td>
</tr> </tr>
@ -94,25 +94,25 @@ exports[`Table renders JSX correctly 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0"> <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 class="ant-table-cell">
<!---->John <!---->John
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Brown <!---->Brown
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->32 <!---->32
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0"> <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 class="ant-table-cell">
<!---->Jim <!---->Jim
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->Green <!---->Green
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->42 <!---->42
</td> </td>
</tr> </tr>

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

File diff suppressed because it is too large Load Diff

4
components/table/demo/expand.vue
View File

@ -17,7 +17,7 @@ When there's too much information to show and the table can't display all at onc
</docs> </docs>
<template> <template>
<a-table :columns="columns" :data-source="data"> <a-table :columns="columns" :data-source="data" :scroll="{ x: 2000 }">
<template #bodyCell="{ column, text }"> <template #bodyCell="{ column, text }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<a>Delete</a> <a>Delete</a>
@ -34,7 +34,7 @@ When there's too much information to show and the table can't display all at onc
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
const columns = [ const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Name', dataIndex: 'name', key: 'name', fixed: true },
{ title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', key: 'action' }, { title: 'Action', key: 'action' },

84
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -450,141 +450,141 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="0" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="0" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content1 <!---->content1
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content1 <!---->description of content1
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="1" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="1" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content2 <!---->content2
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content2 <!---->description of content2
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="3" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="3" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content4 <!---->content4
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content4 <!---->description of content4
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="4" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="4" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content5 <!---->content5
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content5 <!---->description of content5
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="6" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="6" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content7 <!---->content7
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content7 <!---->description of content7
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="7" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="7" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content8 <!---->content8
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content8 <!---->description of content8
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="9" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="9" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content10 <!---->content10
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content10 <!---->description of content10
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="10" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="10" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content11 <!---->content11
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content11 <!---->description of content11
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="12" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="12" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content13 <!---->content13
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content13 <!---->description of content13
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="13" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="13" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content14 <!---->content14
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->description of content14 <!---->description of content14
</td> </td>
</tr> </tr>
@ -650,67 +650,67 @@ exports[`renders ./components/transfer/demo/table-transfer.vue correctly 1`] = `
<tbody class="ant-table-tbody"> <tbody class="ant-table-tbody">
<!----> <!---->
<tr data-row-key="2" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="2" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content3 <!---->content3
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="5" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="5" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content6 <!---->content6
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="8" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="8" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <!----><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content9 <!---->content9
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="11" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="11" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content12 <!---->content12
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="14" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="14" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content15 <!---->content15
</td> </td>
</tr> </tr>
<!----> <!---->
<tr data-row-key="17" class="ant-table-row ant-table-row-level-0"> <tr data-row-key="17" class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-cell-with-append ant-table-selection-column"> <td class="ant-table-cell ant-table-selection-column">
<!----><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></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> </label>
</td> </td>
<td class="ant-table-cell ant-table-cell-with-append"> <td class="ant-table-cell">
<!---->content18 <!---->content18
</td> </td>
</tr> </tr>

40
components/vc-table/Body/BodyRow.tsx
View File

@ -167,26 +167,26 @@ export default defineComponent<BodyRowProps<unknown>>({
transformCellText={transformCellText} transformCellText={transformCellText}
v-slots={{ v-slots={{
// ============= Used for nest expandable ============= // ============= Used for nest expandable =============
appendNode: () => { appendNode:
if (colIndex === (expandIconColumnIndex || 0) && nestExpandable.value) { colIndex === (expandIconColumnIndex || 0) && nestExpandable.value
return ( ? () => {
<> return (
<span <>
style={{ paddingLeft: `${indentSize * indent}px` }} <span
class={`${prefixCls}-row-indent indent-level-${indent}`} style={{ paddingLeft: `${indentSize * indent}px` }}
/> class={`${prefixCls}-row-indent indent-level-${indent}`}
{expandIcon({ />
prefixCls, {expandIcon({
expanded: expanded.value, prefixCls,
expandable: hasNestChildren.value, expanded: expanded.value,
record, expandable: hasNestChildren.value,
onExpand: onInternalTriggerExpand, record,
})} onExpand: onInternalTriggerExpand,
</> })}
); </>
} );
return null; }
}, : undefined,
}} }}
/> />
); );

2
components/vc-table/Body/ExpandedRow.tsx
View File

@ -62,7 +62,7 @@ export default defineComponent<ExpandedRowProps>({
contentNode = ( contentNode = (
<div <div
style={{ style={{
width: componentWidth - (fixHeader ? tableContext.scrollbarSize : 0), width: `${componentWidth - (fixHeader ? tableContext.scrollbarSize : 0)}px`,
position: 'sticky', position: 'sticky',
left: 0, left: 0,
overflow: 'hidden', overflow: 'hidden',

2
components/vc-table/hooks/useColumns.tsx
View File

@ -122,7 +122,7 @@ function useColumns<RecordType>(
const withExpandColumns = computed<ColumnsType<RecordType>>(() => { const withExpandColumns = computed<ColumnsType<RecordType>>(() => {
if (expandable.value) { if (expandable.value) {
const expandColIndex = expandIconColumnIndex.value || 0; const expandColIndex = expandIconColumnIndex.value || 0;
const prevColumn = baseColumns[expandColIndex]; const prevColumn = baseColumns.value[expandColIndex];
let fixedColumn: FixedType | null; let fixedColumn: FixedType | null;
if ((expandFixed.value === 'left' || expandFixed.value) && !expandIconColumnIndex.value) { if ((expandFixed.value === 'left' || expandFixed.value) && !expandIconColumnIndex.value) {