ZnDescriptions 描述组件

常用来作为详情界面的使用

TIP

内容默认都是自动换行显示，如果需要省略号请自行设置样式

基础用法

姓名	1	性别	1
学号	1	住址	1

<ZnDescriptions>
  <ZnDescriptionsItem label="姓名">1</ZnDescriptionsItem>
  <ZnDescriptionsItem label="性别">1</ZnDescriptionsItem>
  <ZnDescriptionsItem label="学号">1</ZnDescriptionsItem>
  <ZnDescriptionsItem label="住址">1</ZnDescriptionsItem>
</ZnDescriptions>

Expand Copy Copy

实现复杂的表格渲染

利用span和rowspan属性可以实现复杂的表格渲染，row-class-name可以自定义行的样式

姓名1	1
姓名1	2	图片2	3	年龄3	4
年龄3	5			年龄3	6
年龄3	7			性别4	8
性别5	9			性别6	10
性别6	10			性别6	10
性别6	10
性别6	10			性别6	10
性别6	10	性别6	10

<template>
    <ZnDescriptions :column="3" :row-class-name="({ rowIndex }) => rowIndex === 2 ? 'zn-descriptions-row-even' : null">
        <ZnDescriptionsItem label="姓名1" :span="3">1</ZnDescriptionsItem>
        <ZnDescriptionsItem label="姓名1">2</ZnDescriptionsItem>
        <ZnDescriptionsItem label="图片2" :rowspan="5">3</ZnDescriptionsItem>
        <ZnDescriptionsItem label="年龄3">4</ZnDescriptionsItem>
        <ZnDescriptionsItem label="年龄3">5</ZnDescriptionsItem>
        <ZnDescriptionsItem label="年龄3">6</ZnDescriptionsItem>
        <ZnDescriptionsItem label="年龄3">7</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别4">8</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别5">9</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="2">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="1">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="1">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="3">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="2">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="1">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="1">10</ZnDescriptionsItem>
        <ZnDescriptionsItem label="性别6" :span="2">10</ZnDescriptionsItem>
    </ZnDescriptions>
</template>
<style>
    .zn-descriptions-row-even {
        height: 100px;
    }
</style>

Expand Copy Copy

标题栏的宽度

自动计算的标题栏难免出现样式错误，出现标题很小，但是内容又很大的情况，可以手动设置标题栏的宽度label-width

姓名	11231231232222222222222222222222222222222222222222222222222222222222212312312312312312312312312	性别	1
学号	1	住址	1

<ZnDescriptions label-width="50px" content-width="average">
  <ZnDescriptionsItem label="姓名">11231231232222222222222222222222222222222222222222222222222222222222212312312312312312312312312</ZnDescriptionsItem>
  <ZnDescriptionsItem label="性别">1</ZnDescriptionsItem>
  <ZnDescriptionsItem label="学号">1</ZnDescriptionsItem>
  <ZnDescriptionsItem label="住址">1</ZnDescriptionsItem>
</ZnDescriptions>

Expand Copy Copy

ZnDescriptions Props

参数	说明	类型	默认值
label-width	标题栏的宽度	string	null
content-width	内容栏的宽度,等于average的时候会根据标题栏宽度将剩下的宽度进行平分	string	null
column	列数	number	2
rowClassName	行的类名	Function:(rowIndex) => String|Array<String>	null

ZnDescriptionsItem Props

参数	说明	类型	默认值
label	标题	string	''
span	列数	number	1
rowspan	行数	number	1