# table表格的使用(动态数据展示)
## 第一种方式<el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount"><el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="head" :sortable="定义自定义排序项"><template slot-scope="scope">{{tableDataalllist[scope.$index][index]}} // 当前行数据  接收两个参数scope.$index; scope.row<template><el-table-column><el-table><script>export default{data(){return{// 数据结构tableDataalllist:[{1,'张宇锋','23'},{2,'李四','15'},{3,'王五','18'}],header:['id','name','age']}  },methods:{// 接受一个obj参数totalusercount(obj){console.log(obj.prop)  // 排序规则console.log(obj.order)  // 排序方式}}}
</script>## 第二种方式(动态进行列的添加)<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="gameareatable.length> 0"><el-table-column align="center" v-for="(item,index) in activePlayerDataPropLabelArray" :prop="item.prop" :label="item.label":key="item.prop"><template slot-scope="scope">{{scope.row[item.prop]?scope.row[item.prop]:'暂无数据'}}</template></el-table-column></el-table>export default {data(){return{// 数据结构  activePlayerDataPropLabelArray为label标签显示label表示当前列th的显示的值,prop表示当前'日期'列下显示date数据,'斗地主'列下显示prop为12的数据,'麻将'列下显示prop为15的数据,activePlayerDataPropLabelArray:[{label:'日期',prop:'date'},{label:"斗地主",prop:"12"},{label:'麻将',prop:'15'}],gameareatable:[{date:"2018-09-10",12:'老k',15:'一万'},{date:"2018-08-01",12:'炸弹',15:'一条' },{date:"2018-08-02",12:'对子',15:'五筒' }]}}
}
复制代码

第一种方式图表:                                                          第二种方式图表

id     name     age                                               日期              斗地主       麻将

1       张宇锋      23                                       2018-09-10            老k          一万

2        李四        15                                        2018-08-01            炸弹         一条

3       王五         18                                       2018-08-02           对子             五筒