第一种方式

	<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>
idnameage
1张三23
2李四15
3王五18

第二种方式(动态进行列的添加)

<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:'五筒' 
           }]
        }
    }
}
日期斗地主麻将
2018-09-10老k一万
2018-08-01炸弹一条
2018-08-02对子一万
Logo

前往低代码交流专区

更多推荐