vue+element-ui动态生成多级表头的方法


Posted in Javascript onAugust 28, 2018

vue+element

html配置:

<div id="table">{{tableData}}
<el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420">
<el-table-column v-for='item in tableConfig' :label="item.label" :prop='item.prop' :width='item.width' :key="item.id">
<el-table-column v-if='item.children||item.children.length>0' v-for="item1 in item.children"
:label="item1.label" :prop='item1.prop' :width='item1.width' :key="item1.id">
<el-table-column v-if='item1.children||item1.children.length>0' v-for="item2 in item1.children"
:label="item2.label" :prop='item2.prop' :width='item2.width' :key="item2.id">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>

data:

tableConfig:[
{id:100,label:'一级表头',prop:'',width:'',children:[
{id:110,label:'二级表头1',prop:'districtName',width:''},
{id:120,label:'二级表头2',prop:'timeDimension',width:''}
]},
{id:200,label:'一级表头',prop:'',width:'',children:[
{id:210,label:'二级表头',prop:'',width:'',children:[
{id:211,label:'三级表头',prop:'residentPopNum',width:'110'},
{id:212,label:'三级表头',prop:'residentPopDst',width:'110'}
]}
]},
{id:300,label:'一级表头',prop:'',width:'',children:[
{id:310,label:'二级表头',prop:'',width:'',children:[
{id:311,label:'三级表头',prop:'liveLandArea',width:'110'},
{id:312,label:'三级表头',prop:'liveLandDst',width:'110'}
],
},
{id:320,label:'二级表头',prop:'',width:'',children:[
{id:321,label:'三级表头(km²)',prop:'employmentLandArea',width:'110'},
{id:322,label:'三级表头',prop:'employmentLandDst',width:'110'}
],
}
]},
{id:400,label:'一级表头',prop:'',width:'',children:[
{id:410,label:'二级表头',prop:'',width:'',children:[
{id:411,label:'三级表头(个)',prop:'regionTrafficHubNum',width:'110'},
{id:412,label:'三级表头(人次/km²)',prop:'regionTrafficHubFlow',width:'140'}
],
},
{id:420,label:'二级表头',prop:'',width:'',children:[
{id:421,label:'三级表头(个)',prop:'highSpeedNum',width:'110'},
{id:422,label:'三级表头(个/km²)',prop:'highSpeedDst',width:'140'}
],
},{id:430,label:'二级表头',prop:'',width:'',children:[
{id:431,label:'三级表头(个)',prop:'trackTrafficSpotNum',width:'140'},
{id:432,label:'三级表头(个/km²)',prop:'trackTrafficSpotDst',width:'140'}
],
},
{id:440,label:'二级表头',prop:'',width:'',children:[
{id:441,label:'三级表头(km)',prop:'trackTrafficNetNum',width:'110'},
{id:442,label:'三级表头(km/km²)',prop:'trackTrafficNetDst',width:'140'}
],
},
{id:450,label:'二级表头',prop:'',width:'',children:[
{id:451,label:'三级表头(个)',prop:'cityTrafficHubNum',width:'110'},
{id:452,label:'三级表头(个/km²)',prop:'cityTrafficHubDst',width:'110'},
{id:453,label:'三级表头(人次/km²)',prop:'cityTrafficHubFlow',width:'140'}
],
},
{id:460,label:'二级表头',prop:'',width:'',children:[
{id:461,label:'三级表头(km)',prop:'cityTrafficNetNum',width:'110'},
{id:462,label:'三级表头',prop:'cityTrafficNetDst',width:'140'}
],
},
]},
{id:500,label:'一级表头',prop:'',width:'',children:[
{id:510,label:'二级表头',prop:'',width:'',children:[
{id:511,label:'三级表头(km²)',prop:'pubServeLandArea',width:'110'},
{id:512,label:'三级表头',prop:'pubServeLandDst',width:'110'}
],
},
{id:520,label:'二级表头',prop:'',width:'',children:[
{id:521,label:'三级表头(个)',prop:'hospitalResourcesNum',width:'110'},
{id:522,label:'三级表头(km²)',prop:'hospitalResourcesArea',width:'110'},
{id:523,label:'三级表头(个/km²)',prop:'hospitalResourcesDst',width:'110'}
],
},{id:530,label:'二级表头',prop:'',width:'',children:[
{id:531,label:'三级表头(个)',prop:'schoolResourcesNum',width:'110'},
{id:532,label:'三级表头(km²)',prop:'schoolResourcesArea',width:'110'},
{id:533,label:'三级表头(个/km²)',prop:'schoolResourcesDst',width:'110'}
],
},
{id:540,label:'二级表头',prop:'',width:'',children:[
{id:541,label:'三级表头(个)',prop:'humanResourcesNum',width:'110'},
{id:542,label:'三级表头(个/km²)',prop:'humanResourcesDst',width:'110'}
],
},
{id:550,label:'二级表头',prop:'',width:'',children:[
{id:551,label:'三级表头(个)',prop:'businessResourcesNum',width:'110'},
{id:552,label:'三级表头(个/km²)',prop:'businessResourcesDst',width:'110'}
],
},
{id:560,label:'二级表头',prop:'',width:'',children:[
{id:561,label:'三级表头(个)',prop:'environResourcesNum',width:'110'},
{id:562,label:'三级表头(个/km²)',prop:'environResourcesDst',width:'110'}
],
},
]},
{id:600,label:'一级表头',prop:'',width:'',children:[
{id:610,label:'二级表头',prop:'',width:'',children:[
{id:611,label:'三级表头(分)',prop:'populationScore',width:'110'},
],
},
{id:620,label:'二级表头',prop:'',width:'',children:[
{id:621,label:'三级表头(分)',prop:'landScore',width:'110'},
],
},{id:630,label:'二级表头',prop:'',width:'',children:[
{id:631,label:'三级表头(分)',prop:'trafficScore',width:'110'},
],
},
{id:640,label:'二级表头',prop:'',width:'',children:[
{id:641,label:'三级表头(分)',prop:'communalFacilitiesScore',width:'110'},
],
},
{id:650,label:'二级表头',prop:'',width:'',children:[
{id:651,label:'三级表头(分)',prop:'modelScore',width:'110'},
],
}
]},
],

注:动态生成表头必须配置"key"

view:

vue+element-ui动态生成多级表头的方法

以上这篇vue+element-ui动态生成多级表头的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Date对象 日期获取函数
Dec 19 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 #Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
本科毕业生求职信
2014/06/15 职场文书
作文评语集锦
2014/12/25 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
初中班干部工作总结
2015/08/10 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫