Element UI动态生成多级表头

1 基础常用的原型样例

我们常常遇到的情况就是表头固定的，我们需要从后端获取对应表头的信息，如果信息比较多的时候为了方便我们展示，可以固定表头和列，下面是一个我们常见的例子：

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

前端显示：

代码实现

<template><el-table:data="tableData3"style="width: 100%"height="250"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table>
</template><script>export default {data() {return {tableData3: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}}}
</script>

2 应用场景分析

由于项目的需求，需要根据用户自定义的方式来初始化表格的表头包含哪些信息，有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。场景：

层数是可变化的，所以需要专门设置一个表格的数据来保存表头，然后通过v-for="item in tableColData"的方式来循环展示表头，由于层数是循环展示表头的，所以如果层数里面如果有第二级别的表头，就需要在表头数据多设置一级children，加上第二层v-for="item1 in item.children"来遍历二级表头。

前端展示

代码实现

<template><el-table:data="tableData9":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"style="width: 100%"max-height="500"@cell-mouse-enter="handleCellEnter"@cell-mouse-leave="handleCellLeave"><el-table-column v-for="item in tableColData":prop="item.id":label="item.name":key="item.id"><el-table-column v-for="item1 in item.children":prop="item1.id":label="item1.name":key="item1.id"></el-table-column></el-table-column></el-table>
</template><script>export default {data() {return {tableColData: [{id: 'num',name: '序号'}, {id: 'class',name: '课程'}, {id: 'floor',name: '地下一层',children: [{id: 'numRoom',name: '间',},{id: 'areaOfUse',name: '使用面积',},{id: 'areaOfStru1',name: '建筑面积1',},{id: 'areaOfStru2',name: '建筑面积2',}]}, {id: 'floor',name: '地下一层',children: [{id: 'numRoom',name: '间',},{id: 'areaOfUse',name: '使用面积',},{id: 'areaOfStru1',name: '建筑面积1',},{id: 'areaOfStru2',name: '建筑面积2',}]}, {id: 'floor',name: '地下一层',children: [{id: 'numRoom',name: '间',},{id: 'areaOfUse',name: '使用面积',},{id: 'areaOfStru1',name: '建筑面积1',},{id: 'areaOfStru2',name: '建筑面积2',}]}, {id: 'floor',name: '地下一层',children: [{id: 'numRoom',name: '间',},{id: 'areaOfUse',name: '使用面积',},{id: 'areaOfStru1',name: '建筑面积1',},{id: 'areaOfStru2',name: '建筑面积2',}]}],// 表内容tableData9: [{num: '1-1-1',class: '小学教室',AperRoom: '84',numRoom: '13',areaOfUse: '1092',areaOfStru1: "1985",areaOfStru2: "1985"}],}}}
</script>

Element UI动态生成多级表头相关推荐

css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
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& ...
vue动态生成多级树结构
vue动态生成多级树结构前言一.思路二.封装组件的代码 1.组件里的template 2.组件里的script 3.style 三.使用步骤 1.调用组件 2.传入数据 3.实现的效果总结前 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...

Element UI动态生成多级表头

1 基础常用的原型样例

2 应用场景分析

Element UI动态生成多级表头相关推荐

最新文章

热门文章