ThDesc描述信息
孙强 2022/2/8 vue
# ThDesc布局组件
此组件为一个布局容器，为描述详细页字段展示使用，目前element新版本也发布了相似的组件
# 依赖说明
element-ui
# 基本使用
<th-desc label-width="150px" style="width: 50%;" :content-style="{'text-align':'content'}">
<el-row type="flex">
<th-desc-item required label="姓名">王某某</th-desc-item>
<th-desc-item label="年龄" label-bg-color="#ff0000">18</th-desc-item>
<th-desc-item label="性别">男</th-desc-item>
</el-row>
<el-row type="flex">
<th-desc-item flex="1" label="年龄">18</th-desc-item>
<th-desc-item flex="2" label="性别" :content-style="{'text-align':'right'}">男男男男男男男男男男男男男男男男</th-desc-item>
</el-row>
<th-desc-item label="个人介绍">爱好等...</th-desc-item>
</th-desc>
# 效果演示
# Api
th-desc
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| labelWidth | 全局设置标题宽度 | String | -- | -- |
| labelSuffix | 全局设置标题后面的标识 | String | ： | -- |
| labelBgColor | 全局设置标题模块的背景颜色 | String | -- | -- |
| contentStyle | 全局设置内容自定义样式 | Object | -- | -- |
th-desc-item
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| label | 标题 | String | -- | -- |
| labelWidth | 设置标题宽度 | String | -- | -- |
| required | 星号标识 | Boolean | false | true |
| flex | flex属性，用于el-rows中设置占比 | String | Number | false |
| labelBgColor | 标题模块的背景颜色 | String | -- | -- |
| contentStyle | 内容自定义样式 | Object | {} | -- |