el-table 动态生成多级表头

html代码：

<el-tablev-loading="loading":data="orgTableData":header-cell-style="{'background':'#f5f7fa','color':'#666'}"stripeborder
><el-table-columnprop="number"label="序号"width="80"type="index"align="center"/><template v-for="item in tableColumns"><el-table-columnv-if="!item.children":key="item.key":label="item.name":prop="item.key"show-overflow-tooltip:min-width="item.minWidth":width="item.width"align="center"></el-table-column><el-table-columnv-else:key="item.key":label="item.name"align="center"><el-table-column v-for="s_item in item.children" :key="s_item.key":label="s_item.name":prop="s_item.key"align="center"></el-table-column></el-table-column></template>
</el-table>

js代码：

tableColumns: [{ key: 'visitPersonCnt', name: '访问（人）', minWidth: 90 },{ key: 'visitCnt', name: '访问（次）', minWidth: 90 },{ key: 'caseSearchCnt', name: '案件搜索（次）', minWidth: 90 },{ name: '自定义标签',children: [{ key: 'diyRemarkCnt', name: '访问（次）', minWidth: 90 },{ key: 'diyRemarkPassCnt', name: '通过（组）', minWidth: 90 },{ key: 'diyRemarkNotPassCnt', name: '不通过（组）', minWidth: 95 }] }，{ key: 'allEvidenceCheckCnt', name: '量刑参考访问（次）', minWidth: 90 }
]

el-table 动态生成表头请参考链接：el-table 动态生成表头

el-table 动态生成多级表头相关推荐

css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
elementui table表格动态生成多级表头
1.实现效果 2.封装table表格组件 test1.vue <template><el-table-column :label="coloumnHeader.label& ...
基于Element组件下动态生成多级表头以及数据
介绍 element是一套基于vue的组件,本文主要介绍如何根据后端传输数据来动态生成表格. 代码 html 利用vue里的for循环来动态生成表头,再利用if语句判断是否有二级表头,并将对应key赋 ...
VUE之Vxe-table动态生成多级表头及后端返回数据的处理
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 步骤: 写入动态html模板 <vxe-tableid="prdReques ...
VUE之Vxe-table动态生成多级表头
需求: 1.第一列为正常列: 2.第二列开始为动态生成列(根据接口返回数据生成): 3.最后一列为编辑列. 实现步骤: 模板中定义: <vxe-tablei ...
vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个...
element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = [];for (var key in obj ...
EasyExcel动态导出多级表头
EasyExcel动态导出多级表头工具类 /*** 特殊表头导出方法* @param response* @param fileName* @param sheetName* @param list ...
vue动态生成多级树结构
vue动态生成多级树结构前言一.思路二.封装组件的代码 1.组件里的template 2.组件里的script 3.style 三.使用步骤 1.调用组件 2.传入数据 3.实现的效果总结前 ...

el-table 动态生成多级表头

el-table 动态生成多级表头相关推荐

最新文章

热门文章