<template>
    <div class="ht-base-descriptions-vertical-demo">
        <ht-base-descriptions title="角色信息" layout="vertical">
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list" :label="item.label" :key="i" v-if="i <= 2" :span="item.span">{{item.value}}</ht-base-descriptions-item>
            </ht-base-descriptions-row>
            <ht-base-descriptions-row>
                <ht-base-descriptions-item v-for="(item, i) in list" :label="item.label" :key="i" v-if="i > 2" :span="item.span">{{item.value}}</ht-base-descriptions-item>
            </ht-base-descriptions-row>
        </ht-base-descriptions>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseDescriptionsVerticalDemo',
    data() {
      return {
        list:[
          {
            label: '用户名称',
            value: 'Admin'
          },
          {
            label: '用户电话',
            value: '18000000000'
          },
          {
            label: '学历',
            value: '大学本科'
          },
          {
            label: '现居住地',
            value: '北京，中国'
          },
          {
            label: '家庭住址',
            value: '北京市海淀区辉煌时代大厦9层',
            span: 2
          },
        ]
      }
    }
  }
</script>
<style>
    .ht-base-descriptions-vertical-demo {

    }
</style>

