1. 说明
将数据以表格的形式展现到网页上，使用ElementUI中的el-able控件来做很方便，如果想把数据按照自己想的样式进行展示，可能需要在此基础做额外的处理。本文中使用比较常用的方法，借助template实现。
2. 相关步骤
代码的整个框架可以查看本系列博客的第一篇文章，里面有具体介绍，此篇文章只给出具体功能实现的相关的代码。
首先，需要使用到el_table控件，该控件属于ElmentUI基础组件库，所以需要进行引用，只需在main.js文件如上如下代码即可：
import ElementUI from ‘element-ui’;
Vue.use(ElementUI);
然后，在自己所需要创建表格展示的地方使用el-able控件即可，需要注意的是，表格的样式定义是按照一列一列进行设置的，但是数据的填充时按照一行一行进行填充的，相关代码片段如下：
<div><!—- dataArray是绑定的表格数据，整体是一个数组类型，数组中存放的是一个个的字典类型，每个字典代表一行数据 —-><el-table class=“tableContent” :data=“dataArray” border style=“width:100%”tooltip-effect=“dark” @selection-change=“rowSelectChange”><!—- 为表格添加第一列 ：姓名 —-><!—- 下面这种方式是原生的格式，其中label设定此列的表头，prop设定此列在字典数据中对应的key,那么此列数据的表格填充将使用每一个字典数据对应key的value —-><el-table-column label=“姓名” width=“120” align=“center” prop=“name”></el-table-column><!—- 另一种方式使用template，这样可以自己定义控件来显示数据内容 —-><el-table-column label=“性别” width=“auto”><template slot-scope=“scope”><!—- scope.row就代表当前行的字典数据 —-><el-tag class=“sextag” effect=“plain”>{{ scope.row.sex }} <!—- 这里直接用点运算符使用键值 —-></el-tag></template></el-table-column><el-table-column label=“年龄” width=“auto”><template slot-scope=“scope”><el-tag class=“ageTag” effect=“plain”>{{ scope.row.age }}</el-tag></template></el-table-column></el-table>
</div>
最后，需要在适当时间把报告需要的数据处理好，具体在什么时间处理就看业务需求了，本篇博客简单起见，直接在整个页面创建时将数据准备好，代码片段如下：
<script>
export default {name:’first_page’,data() {return {dataArray:[],}},created() {this.dataArray = [{name:’xiaoli’, sex:’男’, age:’18’},{name:’xiaoming’, sex:’女’, age:’20’},{name:’xiaozhang’, sec:’男’, age:’24’}];},
}
</script>
当然实际项目开发当中，可能需要将数据以更特殊的方式展现，读者可参考本博客进行改造，应该也是能够实现大部分需求的。
