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

fix: descriptions warning, close #5250

pull/5280/head
tangjinzhou 2022-02-17 19:32:38 +08:00
parent 2d0e2b6899
commit d9cdfa67db
2 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/descriptions/__tests__/__snapshots__/index.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`Descriptions Descriptions support colon 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td> </td>
</tr> </tr>
@ -24,7 +24,7 @@ exports[`Descriptions Descriptions support style 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span> <!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div> </div>
@ -43,7 +43,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
<table> <table>
<tbody> <tbody>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item my-class" colspan="3"> <td class="ant-descriptions-item my-class" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td> </td>
</tr> </tr>
@ -93,11 +93,29 @@ exports[`Descriptions vertical layout 1`] = `
<!----> <!---->
</div> </div>
</th> </th>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td>
</tr>
<tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="1"> <th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
<!----> <!---->
</div> </div>
</th> </th>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Prepaid</span>
</div>
</td>
</tr>
<tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="1"> <th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span>
<!----> <!---->
@ -105,16 +123,6 @@ exports[`Descriptions vertical layout 1`] = `
</th> </th>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Cloud Database</span>
</div>
</td>
<td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">Prepaid</span>
</div>
</td>
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">18:00:00</span> <!----><span class="ant-descriptions-item-content">18:00:00</span>
@ -122,14 +130,14 @@ exports[`Descriptions vertical layout 1`] = `
</td> </td>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<th class="ant-descriptions-item" colspan="3"> <th class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span>
<!----> <!---->
</div> </div>
</th> </th>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"> <div class="ant-descriptions-item-container">
<!----><span class="ant-descriptions-item-content">$80.00</span> <!----><span class="ant-descriptions-item-content">$80.00</span>
</div> </div>
@ -151,15 +159,19 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
</td> </td>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
</td> </td>
</tr>
<tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="1"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
</td> </td>
</tr> </tr>
<tr class="ant-descriptions-row"> <tr class="ant-descriptions-row">
<td class="ant-descriptions-item" colspan="3"> <td class="ant-descriptions-item" colspan="1">
<div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div> <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
</td> </td>
</tr> </tr>

18
components/descriptions/index.tsx
View File

@ -9,7 +9,15 @@ import type {
CSSProperties, CSSProperties,
InjectionKey, InjectionKey,
} from 'vue'; } from 'vue';
import { ref, defineComponent, onMounted, onBeforeUnmount, provide, toRef, computed } from 'vue'; import {
onBeforeMount,
ref,
defineComponent,
onBeforeUnmount,
provide,
toRef,
computed,
} from 'vue';
import warning from '../_util/warning'; import warning from '../_util/warning';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'; import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'; import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
@ -78,7 +86,6 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
clone = cloneElement(node, { clone = cloneElement(node, {
span: rowRestCol, span: rowRestCol,
}); });
warning( warning(
span === undefined, span === undefined,
'Descriptions', 'Descriptions',
@ -95,7 +102,6 @@ function getRows(children: VNode[], column: number) {
let tmpRow: VNode[] = []; let tmpRow: VNode[] = [];
let rowRestCol = column; let rowRestCol = column;
childNodes.forEach((node, index) => { childNodes.forEach((node, index) => {
const span: number | undefined = node.props?.span; const span: number | undefined = node.props?.span;
const mergedSpan = span || 1; const mergedSpan = span || 1;
@ -155,17 +161,13 @@ const Descriptions = defineComponent({
Item: DescriptionsItem, Item: DescriptionsItem,
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('descriptions', props); const { prefixCls, direction } = useConfigInject('descriptions', props);
let token: number; let token: number;
const screens = ref<ScreenMap>({}); const screens = ref<ScreenMap>({});
onBeforeMount(() => {
onMounted(() => {
token = ResponsiveObserve.subscribe(screen => { token = ResponsiveObserve.subscribe(screen => {
if (typeof props.column !== 'object') { if (typeof props.column !== 'object') {
return; return;
} }
screens.value = screen; screens.value = screen;
}); });
}); });