diff --git a/components/descriptions/Col.jsx b/components/descriptions/Col.jsx
index f777c73067..7b75bb6c7c 100644
--- a/components/descriptions/Col.jsx
+++ b/components/descriptions/Col.jsx
@@ -1,5 +1,5 @@
import PropTypes from '../_util/vue-types';
-import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
const ColProps = {
child: PropTypes.any,
@@ -9,70 +9,74 @@ const ColProps = {
layout: PropTypes.oneOf(['horizontal', 'vertical']),
};
-const Col = {
- functional: true,
- props: ColProps,
- render(h, ctx) {
- const { child, bordered, colon, type, layout } = ctx.props;
- const { prefixCls, span = 1 } = getOptionProps(child);
- const { key } = ctx.data;
- const label = getComponentFromProp(child, 'label');
- const slots = getSlots(child);
- const labelProps = {
- attrs: {},
- class: [
- `${prefixCls}-item-label`,
- {
- [`${prefixCls}-item-colon`]: colon,
- [`${prefixCls}-item-no-label`]: !label,
- },
- ],
- key: `${key}-label`,
- };
- if (layout === 'vertical') {
- labelProps.attrs.colSpan = span * 2 - 1;
- }
+const Col = (_, { attrs }) => {
+ // props: {
+ // child: PropTypes.any,
+ // bordered: PropTypes.bool,
+ // colon: PropTypes.bool,
+ // type: PropTypes.oneOf(['label', 'content']),
+ // layout: PropTypes.oneOf(['horizontal', 'vertical']),
+ // }
+ const { child, bordered, colon, type, layout } = attrs;
+ const { prefixCls, span = 1 } = getOptionProps(child);
+ const { key, children = {} } = child || {};
+ const label = children.label && children.label();
+ const defaultSlot = children.default && children.default();
- if (bordered) {
- if (type === 'label') {
- return
{label} | ;
- }
- return (
-
- {slots.default}
- |
- );
+ const someLabelProps = {
+ class: [
+ `${prefixCls}-item-label`,
+ {
+ [`${prefixCls}-item-colon`]: colon,
+ [`${prefixCls}-item-no-label`]: !label,
+ },
+ ],
+ key: `${key}-label`,
+ };
+
+ if (layout === 'vertical') {
+ someLabelProps.colSpan = span * 2 - 1;
+ }
+
+ if (bordered) {
+ if (type === 'label') {
+ return {label} | ;
}
- if (layout === 'vertical') {
- if (type === 'content') {
- return (
-
-
- {slots.default}
-
- |
- );
- }
+ return (
+
+ {defaultSlot}
+ |
+ );
+ }
+ if (layout === 'vertical') {
+ if (type === 'content') {
return (
-
- {label}
+
+ {defaultSlot}
|
);
}
return (
- {label}
-
- {slots.default}
+
+ {label}
|
);
- },
+ }
+ return (
+
+ {label}
+
+ {defaultSlot}
+
+ |
+ );
};
export default Col;
diff --git a/components/descriptions/index.jsx b/components/descriptions/index.jsx
index f60a0c8a13..07c1a2ab2c 100644
--- a/components/descriptions/index.jsx
+++ b/components/descriptions/index.jsx
@@ -1,17 +1,11 @@
+import { inject, isVNode, cloneVNode } from 'vue';
import warning from '../_util/warning';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import { ConfigConsumerProps } from '../config-provider';
import Col from './Col';
import PropTypes from '../_util/vue-types';
-import {
- initDefaultProps,
- isValidElement,
- getOptionProps,
- getComponentFromProp,
-} from '../_util/props-util';
+import { initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
-import Base from '../base';
-import { cloneElement } from '../_util/vnode';
export const DescriptionsItemProps = {
prefixCls: PropTypes.string,
@@ -70,7 +64,7 @@ const generateChildrenRows = (children, column) => {
let lastSpanSame = true;
if (lastItem) {
lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
- itemNode = cloneElement(itemNode, {
+ itemNode = cloneVNode(itemNode, {
props: {
span: leftSpans,
},
@@ -109,12 +103,14 @@ const Descriptions = {
name: 'ADescriptions',
Item: DescriptionsItem,
mixins: [BaseMixin],
- inject: {
- configProvider: { default: () => ConfigConsumerProps },
- },
props: initDefaultProps(DescriptionsProps, {
column: defaultColumnMap,
}),
+ setup() {
+ return {
+ configProvider: inject('configProvider', ConfigConsumerProps),
+ };
+ },
data() {
return {
screens: {},
@@ -205,16 +201,16 @@ const Descriptions = {
layout = 'horizontal',
colon = true,
} = this.$props;
- const title = getComponentFromProp(this, 'title') || null;
+ const title = getComponent(this, 'title') || null;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
const column = this.getColumn();
- const children = this.$slots.default;
+ const children = this.$slots.default && this.$slots.default();
const cloneChildren = toArray(children)
.map(child => {
- if (isValidElement(child)) {
- return cloneElement(child, {
+ if (isVNode(child)) {
+ return cloneVNode(child, {
props: {
prefixCls,
},
@@ -259,10 +255,9 @@ const Descriptions = {
},
};
-Descriptions.install = function(Vue) {
- Vue.use(Base);
- Vue.component(Descriptions.name, Descriptions);
- Vue.component(Descriptions.Item.name, Descriptions.Item);
+Descriptions.install = function(app) {
+ app.component(Descriptions.name, Descriptions);
+ app.component(Descriptions.Item.name, Descriptions.Item);
};
export default Descriptions;