<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" width="300"></el-table-column>
<!-- 自定义列的遍历-->
<el-table-column v-for="(item, index) in colunmName" :key="index" :label="item" >
<el-table-column v-for="(e, i) in colunmName1" :key="i" :label="e" >
<template slot-scope="scope">
<!-- 数据的遍历 scope.row可以理解为每一行数据-->
<!-- {{scope.row}} 输出：
{
date: '2016-05-02',
name: '李逍遥',
address: '上海市普陀区金沙江路 1518 弄',
list:[
{name:"精力",average:10,minimum:50,highest:88},
{name:"灵力",average:20,minimum:60,highest:87},
{name:"武力",average:30,minimum:72,highest:94},
{name:"智力",average:40,minimum:60,highest:78}
]
}
-->
<span>{{scope.row.list[index][colunmName2[i]]}}</span>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
colunmName: ['精力', '灵力','武力','智力'],
colunmName1: ['平均值', '最低值','最高值'],
colunmName2: ['average', 'minimum','highest'],
tableData: [
{
date: '2016-05-02',
name: '李逍遥',
address: '上海市普陀区金沙江路 1518 弄',
list:[
{name:"精力",average:10,minimum:50,highest:'爆表'},
{name:"灵力",average:20,minimum:60,highest:'爆表'},
{name:"武力",average:30,minimum:72,highest:'爆表'},
{name:"智力",average:40,minimum:60,highest:'爆表'}
]
}, {
date: '2016-05-04',
name: '赵灵儿',
address: '仙灵岛',
list:[
{name:"精力",average:50,minimum:44,highest:'爆表'},
{name:"灵力",average:60,minimum:56,highest:'爆表'},
{name:"武力",average:70,minimum:43,highest:'爆表'},
{name:"智力",average:80,minimum:60,highest:'爆表'}
]
}, {
date: '2016-05-01',
name: '李忆如',
address: '杭州',
list:[
{name:"精力",average:40,minimum:53,highest:73},
{name:"灵力",average:20,minimum:15,highest:75},
{name:"武力",average:54,minimum:43,highest:90},
{name:"智力",average:26,minimum:61,highest:88}
]
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
list:[
{name:"精力",average:35,minimum:73,highest:64},
{name:"灵力",average:25,minimum:45,highest:34},
{name:"武力",average:64,minimum:66,highest:23},
{name:"智力",average:23,minimum:25,highest:66}
]
}, {
date: '2016-05-03',
name: '唐雪见',
address: '唐家堡',
list:[
{name:"精力",average:35,minimum:73,highest:64},
{name:"灵力",average:25,minimum:45,highest:34},
{name:"武力",average:64,minimum:66,highest:23},
{name:"智力",average:23,minimum:25,highest:66}
]
}, {
date: '2016-05-03',
name: '景天',
address: '天界',
list:[
{name:"精力",average:35,minimum:73,highest:'爆表'},
{name:"灵力",average:25,minimum:45,highest:'爆表'},
{name:"武力",average:64,minimum:66,highest:'爆表'},
{name:"智力",average:23,minimum:25,highest:75}
]
}, {
date: '2016-05-03',
name: '花楹',
address: '唐家堡',
list:[
{name:"精力",average:35,minimum:73,highest:64},
{name:"灵力",average:25,minimum:45,highest:34},
{name:"武力",average:64,minimum:66,highest:23},
{name:"智力",average:23,minimum:25,highest:66}
]
}, {
date: '2016-05-03',
name: '紫萱',
address: '未知',
list:[
{name:"精力",average:35,minimum:73,highest:58},
{name:"灵力",average:25,minimum:45,highest:35},
{name:"武力",average:64,minimum:66,highest:25},
{name:"智力",average:23,minimum:25,highest:'未知'}
]
}
]
}
}
})
</script>
</html>
