前端vue二维数组解析_vue定义二维数组,vue二维数组资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

vue

el-table

v-for

vue嵌套循环

需积分: 36 28 浏览量 2018-09-12 11:06:01 上传评论 1 收藏 161KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

demo.rar （4个子文件）

demo

vue.min.js 70KB

index.css 193KB

new_file.html 5KB

index.js 525KB

<!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">   <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>

评论收藏

内容反馈