Vue3，Element Plus，el-descriptions，el-table

示意图：

 Vue

<template>
  <el-table :data="[{}]" border>
    <el-table-column v-for="item in list" :key="item.label" :label="item.label" align="center">
      <template #default="scope">
        <span>{{ item.value }}</span>
      </template>
    </el-table-column>
  </el-table>

  <el-descriptions title="Vertical list with border" direction="vertical" :column="5" border>
    <el-descriptions-item v-for="item in list" :label="item.label">{{ item.value }}</el-descriptions-item>
  </el-descriptions>
</template>

• el-table

  • :data="[{}]"：表格的数据源，这里传入了一个只包含一个空对象的数组，用于渲染一行数据。

• el-table-column：通过 v-for 动态生成列，每个列对应 list 数组中的一个对象。

  • :key="item.label"：设置每列的唯一标识符。
  • :label="item.label"：设置表头显示的标签。

• <template #default="scope">：自定义单元格内容。

  • {{ item.value }}：显示当前列对应的值。

TS

<script setup lang="ts">
const list = [
  { label: 'Username', value: 'kooriookami' },
  { label: 'Telephone', value: '18100000000' },
  { label: 'Place', value: 'Suzhou' },
  { label: 'Address', value: 'No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province' },
]
</script>

 Element Plus 示例