name是edcDataHisList数组中的数组 怎么用element-UI让这个数组以表格形式显示
时间: 2024-05-23 16:09:12 浏览: 13
您可以使用Element-UI的<table>和<el-table-column>组件来实现将edcDataHisList数组以表格形式展示。具体步骤如下:
1. 在模板中添加<table>组件:
<template>
<table>
</table>
</template>
2. 在<table>中添加<el-table-column>组件来定义表格的列数、列名和绑定数据:
<template>
<table>
<el-table-column
prop="name"
label="名称">
</el-table-column>
</table>
</template>
3. 将数组绑定到表格数据:
<template>
<table>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table :data="edcDataHisList">
</el-table>
</table>
</template>
以上就是如何使用Element-UI将edcDataHisList数组以表格形式展示的步骤。
相关问题
edcDataHisList中的name字段是一个数组 怎么用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 数组了。
封装一个element-ui table组件,实现传入一个字段名数组,根据字段名显示出对应的table
以下是封装的element-ui table组件示例代码:
```
<template>
<div>
<el-table :data="tableData">
<el-table-column v-for="field in fields" :key="field" :prop="field" :label="field"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
fields: {
type: Array,
required: true
},
tableData: {
type: Array,
required: true
}
}
};
</script>
```
在父组件中使用该封装组件,传入字段名数组和table数据即可:
```
<template>
<div>
<my-table :fields="fields" :table-data="tableData"></my-table>
</div>
</template>
<script>
import MyTable from "@/components/MyTable.vue";
export default {
data() {
return {
fields: ["name", "age", "gender"],
tableData: [
{ name: "Tom", age: 20, gender: "male" },
{ name: "Lucy", age: 18, gender: "female" },
{ name: "Jack", age: 22, gender: "male" }
]
};
},
components: {
MyTable
}
};
</script>
```
这样就可以根据传入的字段名数组动态生成对应的表头,并显示出对应的table数据了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)