使用vue组件库Naive-ui写表格-纵向表头

• 语法：vue3+ts

• naive-ui版本： "2.34.3"

• 暂时先写基础用法

实现效果

代码

<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"//表头名称