mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 17:31:43 +08:00
79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
|
import PropTypes from '../_util/vue-types';
|
||
|
import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util';
|
||
|
|
||
|
const ColProps = {
|
||
|
child: PropTypes.any,
|
||
|
bordered: PropTypes.bool,
|
||
|
colon: PropTypes.bool,
|
||
|
type: PropTypes.oneOf(['label', 'content']),
|
||
|
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;
|
||
|
}
|
||
|
|
||
|
if (bordered) {
|
||
|
if (type === 'label') {
|
||
|
return <th {...labelProps}>{label}</th>;
|
||
|
}
|
||
|
return (
|
||
|
<td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
|
||
|
{slots.default}
|
||
|
</td>
|
||
|
);
|
||
|
}
|
||
|
if (layout === 'vertical') {
|
||
|
if (type === 'content') {
|
||
|
return (
|
||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||
|
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
||
|
{slots.default}
|
||
|
</span>
|
||
|
</td>
|
||
|
);
|
||
|
}
|
||
|
return (
|
||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||
|
<span
|
||
|
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
|
||
|
key={`${key}-label`}
|
||
|
>
|
||
|
{label}
|
||
|
</span>
|
||
|
</td>
|
||
|
);
|
||
|
}
|
||
|
return (
|
||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||
|
<span {...labelProps}>{label}</span>
|
||
|
<span class={`${prefixCls}-item-content`} key={`${key}-content`}>
|
||
|
{slots.default}
|
||
|
</span>
|
||
|
</td>
|
||
|
);
|
||
|
},
|
||
|
};
|
||
|
|
||
|
export default Col;
|