语法:vue3+ts
naive-ui版本: "2.34.3"
暂时先写基础用法
实现效果
![](https://i-blog.csdnimg.cn/blog_migrate/c3496a937ca31e4b9fbb4bff3a1b36b3.png)
代码
<template>
<div>
<n-descriptions label-placement="left" title="基本用法" :column="3" bordered>
<n-descriptions-item v-for="(item,index) of tabelHead" :key='index' :label="item.label">{{ item.prop }}</n-descriptions-item>
<n-descriptions-item label="一个表头" :span="2">多行<br>内容</n-descriptions-item>
</n-descriptions>
</div>
</template>
<script setup lang="ts">
var tabelHead = [
{label:'身份证号',prop:'1314'},
{label:'名字',prop:'张三'},
{label:'爱好',prop:'看电影'},
{label:'年龄',prop:'35'},
{label:'职业',prop:'律师'},
{label:'收入',prop:'暂无'},
]
</script>
<style scoped></style>
补充知识
组件名称:n-descriptions
label-placement="left" //表头位置 可选:left、top
:column="3"//一行的列数,即表头数
bordered//打开边框,显示形式变成表格
组件名称:n-descriptions-item
v-for="(item,index) of tabelHead" :key='index' //通过下标来绑定列表循环数据tabelHead
:label="item.label"//表头名称