fix: descriptions label not work
parent
cde476a1f7
commit
4320e8dc76
|
@ -1 +1 @@
|
||||||
Subproject commit 2cbc6d48fd3de73954f1cb9689d9ac5b2dd8355c
|
Subproject commit be0a3b6de3866c09e82c6e7e66b6db5932142f49
|
|
@ -3,8 +3,8 @@ import { getOptionProps } from '../_util/props-util';
|
||||||
const Col = (_, { attrs }) => {
|
const Col = (_, { attrs }) => {
|
||||||
const { child = {}, bordered, colon, type, layout, colKey: key } = attrs;
|
const { child = {}, bordered, colon, type, layout, colKey: key } = attrs;
|
||||||
const { prefixCls, span = 1 } = getOptionProps(child);
|
const { prefixCls, span = 1 } = getOptionProps(child);
|
||||||
const { children = {} } = child;
|
const { children = {}, props = {} } = child;
|
||||||
const label = children.label && children.label();
|
const label = props.label || (children.label && children.label());
|
||||||
const defaultSlot = children.default && children.default();
|
const defaultSlot = children.default && children.default();
|
||||||
|
|
||||||
const labelProps = {
|
const labelProps = {
|
||||||
|
@ -19,7 +19,7 @@ const Col = (_, { attrs }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (layout === 'vertical') {
|
if (layout === 'vertical') {
|
||||||
labelProps.colSpan = span * 2 - 1;
|
labelProps.colspan = span * 2 - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (bordered) {
|
if (bordered) {
|
||||||
|
@ -27,7 +27,7 @@ const Col = (_, { attrs }) => {
|
||||||
return <th {...labelProps}>{label}</th>;
|
return <th {...labelProps}>{label}</th>;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
|
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colspan={span * 2 - 1}>
|
||||||
{defaultSlot}
|
{defaultSlot}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
|
@ -35,7 +35,7 @@ const Col = (_, { attrs }) => {
|
||||||
if (layout === 'vertical') {
|
if (layout === 'vertical') {
|
||||||
if (type === 'content') {
|
if (type === 'content') {
|
||||||
return (
|
return (
|
||||||
<td colSpan={span} class={`${prefixCls}-item`}>
|
<td colspan={span} class={`${prefixCls}-item`}>
|
||||||
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
||||||
{defaultSlot}
|
{defaultSlot}
|
||||||
</span>
|
</span>
|
||||||
|
@ -43,7 +43,7 @@ const Col = (_, { attrs }) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<td colSpan={span} class={`${prefixCls}-item`}>
|
<td colspan={span} class={`${prefixCls}-item`}>
|
||||||
<span
|
<span
|
||||||
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
|
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
|
||||||
key={`${key}-label`}
|
key={`${key}-label`}
|
||||||
|
@ -54,7 +54,7 @@ const Col = (_, { attrs }) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<td colSpan={span} class={`${prefixCls}-item`}>
|
<td colspan={span} class={`${prefixCls}-item`}>
|
||||||
<span {...labelProps}>{label}</span>
|
<span {...labelProps}>{label}</span>
|
||||||
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
||||||
{defaultSlot}
|
{defaultSlot}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
exports[`Descriptions Descriptions support colon 1`] = `
|
exports[`Descriptions Descriptions support colon 1`] = `
|
||||||
<div class="ant-descriptions">
|
<div class="ant-descriptions">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -16,11 +17,12 @@ exports[`Descriptions Descriptions support colon 1`] = `
|
||||||
|
|
||||||
exports[`Descriptions Descriptions support style 1`] = `
|
exports[`Descriptions Descriptions support style 1`] = `
|
||||||
<div class="ant-descriptions" style="background-color: rgb(232, 232, 232);">
|
<div class="ant-descriptions" style="background-color: rgb(232, 232, 232);">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="ant-descriptions-row">
|
<tr class="ant-descriptions-row">
|
||||||
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"></span><span class="ant-descriptions-item-content">Cloud Database</span></td>
|
<td colspan="3" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon ant-descriptions-item-no-label"><!----></span><span class="ant-descriptions-item-content">Cloud Database</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
@ -30,6 +32,7 @@ exports[`Descriptions Descriptions support style 1`] = `
|
||||||
|
|
||||||
exports[`Descriptions Descriptions.Item support className 1`] = `
|
exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||||
<div class="ant-descriptions">
|
<div class="ant-descriptions">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -44,6 +47,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
|
||||||
|
|
||||||
exports[`Descriptions column is number 1`] = `
|
exports[`Descriptions column is number 1`] = `
|
||||||
<div class="ant-descriptions">
|
<div class="ant-descriptions">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -63,6 +67,7 @@ exports[`Descriptions column is number 1`] = `
|
||||||
|
|
||||||
exports[`Descriptions vertical layout 1`] = `
|
exports[`Descriptions vertical layout 1`] = `
|
||||||
<div class="ant-descriptions">
|
<div class="ant-descriptions">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -90,6 +95,7 @@ exports[`Descriptions vertical layout 1`] = `
|
||||||
|
|
||||||
exports[`Descriptions when item is rendered conditionally 1`] = `
|
exports[`Descriptions when item is rendered conditionally 1`] = `
|
||||||
<div class="ant-descriptions">
|
<div class="ant-descriptions">
|
||||||
|
<!---->
|
||||||
<div class="ant-descriptions-view">
|
<div class="ant-descriptions-view">
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
|
@ -61,7 +61,7 @@ describe('Descriptions', () => {
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Descriptions column="3">
|
<Descriptions column={3}>
|
||||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||||
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||||||
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||||||
|
@ -225,10 +225,5 @@ describe('Descriptions', () => {
|
||||||
|
|
||||||
enquire.callunmatch();
|
enquire.callunmatch();
|
||||||
wrapper.unmount();
|
wrapper.unmount();
|
||||||
|
|
||||||
await asyncExpect(() => {});
|
|
||||||
await asyncExpect(() => {});
|
|
||||||
await asyncExpect(() => {});
|
|
||||||
await asyncExpect(() => {});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -31,6 +31,9 @@ function toArray(value) {
|
||||||
export const DescriptionsItem = {
|
export const DescriptionsItem = {
|
||||||
name: 'ADescriptionsItem',
|
name: 'ADescriptionsItem',
|
||||||
props: initDefaultProps(DescriptionsItemProps, { span: 1 }),
|
props: initDefaultProps(DescriptionsItemProps, { span: 1 }),
|
||||||
|
render() {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DescriptionsProps = {
|
export const DescriptionsProps = {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import demo from '../antdv-demo/docs/date-picker/demo/disabled';
|
import demo from '../antdv-demo/docs/descriptions/demo/index';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue