edcDataHisList中的name字段是一个数组 怎么用element-UI让这个数组以表格形式显示
时间: 2024-05-04 08:16:28 浏览: 77
前端仿 element UI 实现表格组件
如果使用 element-UI,可以选择使用 el-table 组件来显示这个数组以表格形式展现。可以将数组作为数据源,使用 el-table-column 组件来控制列的显示方式。
以下是一个示例代码:
```
<el-table :data="edcDataHisList">
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<span v-for="name in scope.row.name">{{ name }}</span>
</template>
</el-table-column>
</el-table>
```
这段代码中,使用 el-table 组件来展现 edcDataHisList 数组,使用 el-table-column 组件来控制表格列的显示方式,prop="name" 表示这列数据的来源是数组中的 name 属性,label="Name" 表示这列的表头标题为 "Name"。
在 el-table-column 中使用了一个 template 标签,并设置了 slot-scope="scope",来自定义这列的显示内容。在 template 中使用了一个 v-for 循环来显示数组中的每一个元素。
这样就可以以表格形式显示 edcDataHisList 中的 name 数组了。
阅读全文