edcDataHisList中的name字段是一个数组 怎么用element-UI让这个数组以表格形式显示
时间: 2024-05-04 18:16:28 浏览: 19
如果使用 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数据了。
使用 element-ui 写一个数据统计表
这里是一个简单的例子,使用 element-ui 和 Vue.js 来展示一些假数据的统计表。
HTML:
```
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="views" label="访问量"></el-table-column>
<el-table-column prop="clicks" label="点击量"></el-table-column>
<el-table-column prop="sales" label="销售额"></el-table-column>
<el-table-column prop="profit" label="利润"></el-table-column>
</el-table>
</div>
```
JavaScript:
```
new Vue({
el: '#app',
data: {
tableData: [
{
date: '2022-01-01',
name: '张三',
views: 1234,
clicks: 567,
sales: 10000,
profit: 5000
},
{
date: '2022-01-02',
name: '李四',
views: 2345,
clicks: 678,
sales: 12000,
profit: 6000
},
{
date: '2022-01-03',
name: '王五',
views: 3456,
clicks: 789,
sales: 15000,
profit: 7500
},
{
date: '2022-01-04',
name: '赵六',
views: 4567,
clicks: 890,
sales: 18000,
profit: 9000
}
]
}
})
```
这是一个简单的数据统计表,其中有日期、姓名、访问量、点击量、销售额和利润六个字段。我们使用 element-ui 中的 el-table 和 el-table-column 标签来创建表格。在 Vue.js 中,我们将表格数据存储在 tableData 中,并在 el-table 标签中使用 :data 属性将其传递给表格组件。
运行代码后,将会看到一个类似于以下表格的样式:
日期 | 姓名 | 访问量 | 点击量 | 销售额 | 利润
----|------|--------|--------|--------|-----
2022-01-01 | 张三 | 1234 | 567 | 10000 | 5000
2022-01-02 | 李四 | 2345 | 678 | 12000 | 6000
2022-01-03 | 王五 | 3456 | 789 | 15000 | 7500
2022-01-04 | 赵六 | 4567 | 890 | 18000 | 9000
我们可以根据自己的需求来调整表格的显示方式和样式,来展示更丰富、更有用的数据统计信息。