element UI实现动态生成多级表头
一、效果图
二、封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成
DynamicTable.vue
1 <template> 2 <el-table :data="tableData" border :height="height"> 3 <template v-for="item in tableHeader"> 4 <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column> 5 <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column> 6 </template> 7 </el-table> 8 </template> 9 10 <script> 11 import TableColumn from './TableColumn' 12 export default { 13 props: { 14 // 表格的数据 15 tableData: { 16 type: Array, 17 required: true 18 }, 19 // 多级表头的数据 20 tableHeader: { 21 type: Array, 22 required: true 23 }, 24 // 表格的高度 25 height: { 26 type: String, 27 default: '300' 28 } 29 }, 30 components: { 31 TableColumn 32 } 33 } 34 </script> 35 36 <style scoped> 37 38 </style>
TableColumn.vue
<template><el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" align="center"><template v-for="item in coloumnHeader.children"><tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn><el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column></template></el-table-column> </template><script> export default {name: 'tableColumn',props: {coloumnHeader: {type: Object,required: true}} } </script><style scoped></style>
三、使用
HTML代码
1 <div class="result-wrapper"> 2 <dynamic-table :table-data="tableData" :table-header="tableConfig" v-if="dynamicTableShow"></dynamic-table> 3 <dynamic-form v-else></dynamic-form> 4 </div>
JS代码
1 <script> 2 import DynamicTable from './components/DynamicTable' 3 export default { 4 components: { 5 DynamicTable 6 }, 7 data () { 8 return { 9 searchForm: { 10 month: getMonth(), 11 serviceCategory: '1' 12 }, 13 dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量 14 // 表数据 15 tableData: [ 16 { 17 districtName: '1', 18 timeDimension: '2', 19 residentPopNum: '3', 20 residentPopDst: '4', 21 liveLandArea: '5', 22 liveLandDst: '6', 23 employmentLandArea: '7', 24 employmentLandDst: '8' 25 } 26 ], 27 // 表头数据 28 tableConfig: [ 29 { 30 id: 100, 31 label: '一级表头', 32 prop: '', 33 children: [ 34 { 35 id: 110, 36 label: '二级表头1', 37 prop: 'districtName' 38 }, 39 { 40 id: 120, 41 label: '二级表头2', 42 prop: 'timeDimension' 43 } 44 ] 45 }, 46 { 47 id: 200, 48 label: '一级表头1', 49 prop: '', 50 children: [ 51 { 52 id: 210, 53 label: '二级表头2', 54 prop: '', 55 children: [ 56 { 57 id: 211, 58 label: '三级表头3', 59 prop: 'residentPopNum' 60 }, 61 { 62 id: 212, 63 label: '三级表头', 64 prop: 'residentPopDst' 65 } 66 ] 67 } 68 ] 69 }, 70 { 71 id: 300, 72 label: '一级表头1', 73 prop: '', 74 children: [ 75 { 76 id: 310, 77 label: '二级表头2', 78 prop: '', 79 children: [ 80 { 81 id: 311, 82 label: '三级表头3', 83 prop: 'liveLandArea' 84 }, 85 { 86 id: 312, 87 label: '三级表头3', 88 prop: 'liveLandDst' 89 } 90 ] 91 }, 92 { 93 id: 320, 94 label: '二级表头1', 95 prop: '', 96 children: [ 97 { 98 id: 321, 99 label: '三级表头3', 100 prop: 'employmentLandArea' 101 }, 102 { 103 id: 322, 104 label: '三级表头3', 105 prop: 'employmentLandDst' 106 } 107 ] 108 } 109 ] 110 } 111 ] 112 } 113 }, 114 methods: { 115 // 服务类型改变的时候,需要重新请求表头信息和表格数据 116 handleServiceCategoryChange (val) { 117 // 设置dynamicTableShow为false,使得DynamicTable组件重新渲染 118 this.dynamicTableShow = false 119 if (val === '1') { 120 this.tableData = [ 121 { 122 districtName: '1', 123 timeDimension: '2', 124 residentPopNum: '3', 125 residentPopDst: '4', 126 liveLandArea: '5', 127 liveLandDst: '6', 128 employmentLandArea: '7', 129 employmentLandDst: '8' 130 } 131 ] 132 this.tableConfig = [ 133 { 134 id: 100, 135 label: '一级表头', 136 prop: '', 137 children: [ 138 { 139 id: 110, 140 label: '二级表头1', 141 prop: 'districtName' 142 }, 143 { 144 id: 120, 145 label: '二级表头2', 146 prop: 'timeDimension' 147 } 148 ] 149 }, 150 { 151 id: 200, 152 label: '一级表头1', 153 prop: '', 154 children: [ 155 { 156 id: 210, 157 label: '二级表头2', 158 prop: '', 159 children: [ 160 { 161 id: 211, 162 label: '三级表头3', 163 prop: 'residentPopNum' 164 }, 165 { 166 id: 212, 167 label: '三级表头', 168 prop: 'residentPopDst' 169 } 170 ] 171 } 172 ] 173 }, 174 { 175 id: 300, 176 label: '一级表头1', 177 prop: '', 178 children: [ 179 { 180 id: 310, 181 label: '二级表头2', 182 prop: '', 183 children: [ 184 { 185 id: 311, 186 label: '三级表头3', 187 prop: 'liveLandArea' 188 }, 189 { 190 id: 312, 191 label: '三级表头3', 192 prop: 'liveLandDst' 193 } 194 ] 195 }, 196 { 197 id: 320, 198 label: '二级表头1', 199 prop: '', 200 children: [ 201 { 202 id: 321, 203 label: '三级表头3', 204 prop: 'employmentLandArea' 205 }, 206 { 207 id: 322, 208 label: '三级表头3', 209 prop: 'employmentLandDst' 210 } 211 ] 212 } 213 ] 214 } 215 ] 216 } else { 217 this.tableData = [ 218 { 219 districtName: '111', 220 timeDimension: '222' 221 } 222 ] 223 this.tableConfig = [ 224 { 225 id: 100, 226 label: '一级表头', 227 prop: '', 228 children: [ 229 { 230 id: 110, 231 label: '二级表头1', 232 prop: 'districtName' 233 }, 234 { 235 id: 120, 236 label: '二级表头2', 237 prop: 'timeDimension' 238 } 239 ] 240 } 241 ] 242 } 243 // 此处是DOM还没有更新,此处的代码是必须的 244 this.$nextTick(() => { 245 // DOM 现在更新了 246 this.dynamicTableShow = true 247 }) 248 } 249 } 250 } 251 </script> 252 253 <style scoped> 254 .policy-wrapper{ 255 margin-top: 10px; 256 } 257 .result-wrapper{ 258 margin-top: 22px; 259 } 260 </style>
转载于:https://www.cnblogs.com/llcdxh/p/9473458.html
element UI实现动态生成多级表头相关推荐
- css画表格多级表头,element UI实现动态生成多级表头
一.效果图 二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
- 基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
- Element UI动态生成多级表头
1 基础常用的原型样例 我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
- vue+element-ui动态生成多级表头,并且将有相同字段下不同子元素合并为同一个...
element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = [];for (var key in obj ...
- VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 步骤: 写入动态html模板 <vxe-tableid="prdReques ...
- VUE之Vxe-table动态生成多级表头
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 实现步骤: 模板中定义: <!-- 多级表头 --><vxe-tablei ...
- el-table 动态生成多级表头
html代码: <el-tablev-loading="loading":data="orgTableData":header-cell-style=&q ...
- elementui table表格动态生成多级表头
1.实现效果 2.封装table表格组件 test1.vue <template><el-table-column :label="coloumnHeader.label& ...
- element ui el-table动态生成表头(v-for/v-if)导致的高度塌陷(少一截)的解决办法
只需要在vue的updated生命周期中加入强制刷新组件代码即可解决: 需要给el-table组件加上ref!!!!!! updated() {this.$refs['showData_table'] ...
- element ui 菜单 动态生成 导航
1. 利用饿了么ui 的 导航菜单组件 (el-menu)来结合 后台返回的 菜单数组进行循环嵌套. 2.看如下代码 <el-menu:default-active="activeIn ...
最新文章
- mt4指标最精准组合指标_股市最赚钱的黄金指标组合:KDJ+MACD指标的配合使用,助于买在低点卖在高点!...
- 北京soul_打破虚拟迎接现实,“Soul”让网络社交楚楚不凡
- 程序员所应具备的品质
- 手把手教你安装鸿蒙和运行第一个Demo(js)版
- java cacheutil_Java 常用缓存Cache机制的实现
- java 指令重拍_我发现我的Java重拍了!
- Python 数据分析三剑客之 Pandas(二):Index 索引对象以及各种索引操作
- java 调用groovy_Java调用Groovy脚本
- shell 获取MD5值
- 干货!639页《深度学习:Deep Learning》硬核课程PPT
- 自己构建React项目
- HDU 5938 2016CCPC杭州 F: Four Operations
- 单平台软件开发多系统APP
- leetcode之有效的括号
- 面对网络灾难风暴Fortinet安立方打造完美方舟
- 北京交通大学2020计算机考研科目,2020北京交通大学软件工程考研初试科目.pdf
- 你技术这么好,总要改变点什么把!
- 数学作图工具_非常实用的九个程序员工具网站
- matlab马赫带,学习实现马赫带效果
- 计算机毕业设计HTML+CSS+JavaScript仿大型购物商城(1页)
热门文章
- 多个JVM之间,能否共用同样的类?
- 使用TortoiseGit提交代码到github上
- LINUX SHELL中使用sed匹配某一行并替换这一行的内容
- 全网首发:LINUX上编译ARM(AARCH)版本的OpenJDK8
- LINUX下载编译FreeType
- 解决办法:access restriction is not accessible due to restriction
- env-FindClass()为NULL的一种解决办法
- 手机停机时,考虑允许低速上网以充值
- std::map的KEY如果是char*,必须是malloc的
- 解决办法:string in namespace std does not name a type