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

18
components/descriptions/index.tsx
View File

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