Descriptions组件

案例

基础用法

vue

<template>
  <ws-descriptions title="用户信息">
    <ws-descriptions-item  label="姓名">张三</ws-descriptions-item>
    <ws-descriptions-item  label="年龄">18</ws-descriptions-item>
    <ws-descriptions-item  label="电话">13612345678</ws-descriptions-item>
    <ws-descriptions-item  label="地址">广东省深圳市宝安区</ws-descriptions-item>
  </ws-descriptions>
</template>

内容使用插槽

2.11.2 版本支持

vue

<template>
  <ws-descriptions title="用户信息">
    <ws-descriptions-item  label="姓名">张三</ws-descriptions-item>
    <ws-descriptions-item  label="年龄">18</ws-descriptions-item>
    <ws-descriptions-item  label="电话">13612345678</ws-descriptions-item>
    <ws-descriptions-item  label="地址">
      <template #content>
        <div>
          这块内容可以自己定制，但是，样式需要自己维护，比如右边框和下边框
        </div>
      </template>
    </ws-descriptions-item>
  </ws-descriptions>
</template>

descriptions 属性

对应 ws-descriptions 组件

参数	说明	类型	默认值
title	标题	String	-
align	label对齐方式	String	right
showToggle	是否显示展开收起	Boolean	true
border	是否展示边框	Boolean	true
background	label背景颜色	String	#f5f7fa
labelWidth	label宽度	String	150px

descriptions 插槽

对应 ws-descriptions 组件

name	说明
title	自定义标题
extra	自定义头部右侧

Item props

对应 ws-descriptions-item 组件

参数	说明	类型	默认值
label	label名称	String	-
showTip	是否展示tooltip（内容过长时建议开启）	Boolean	right

Item 插槽

对应 ws-descriptions-item 组件

name	说明	版本
content	自定义右侧内容	2.11.2支持

Descriptions组件 ​

案例 ​

基础用法 ​

内容使用插槽 ​

descriptions 属性 ​

descriptions 插槽 ​

Item props ​

Item 插槽 ​

Descriptions组件

案例

基础用法

内容使用插槽

descriptions 属性

descriptions 插槽

Item props

Item 插槽