使用 element-ui 写一个数据统计表
时间: 2023-11-20 14:47:38 浏览: 27
这里是一个简单的例子,使用 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
我们可以根据自己的需求来调整表格的显示方式和样式,来展示更丰富、更有用的数据统计信息。