vue 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>

id
name
age
1
張三
23
2
李四
15
3
王五
18
2つ目の方法(カラムの追加を動的に行う)

<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
1万
2018-08-01
爆弾
1本
2018-08-02
ペア
1万