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:'五筒' 
                }]
        }
    }
}
复制代码