element 复杂表格，表格合并

element ui 复杂表格，表格合并
效果图:

<template><div style=""><el-table:data="tableData":span-method="objectSpanMethod"border:header-cell-style="head":header-row-style ='headrow'style="width: 100%; margin-top: 20px"><el-table-columnlabel="抽验渠道"width="100"><template slot="header" slot-scope="scope"><div class="first-head"><div class="yplx">类别</div><div class="line"></div><div class="cyqd">渠道</div></div></template><el-table-columnprop="id"width="100"></el-table-column><el-table-columnprop="name"width="100"></el-table-column><el-table-columnprop="amount1"width="100"></el-table-column></el-table-column><el-table-columnprop="amount2"label="数值 2（元）"></el-table-column><el-table-columnprop="amount3"label="数值 3（元）"></el-table-column></el-table></div>
</template><script>export default {name: "ceshi",data() {return {tableData: [{id: '生产单位',name: '单位数',amount1: '总数'}, {id: '生产单位',name: '单位数',amount1: '不合格数'}, {id: '生产单位',name: '品种数',amount1: '总数'}, {id: '生产单位',name: '品种数',amount1: '不合格数'}, {id: '生产单位',name: '批数',amount1: '总数',},{id: '生产单位',name: '单位数',amount1: '不合格数',},{id: '经营单位',name: '单位数',amount1: '总数',},{id: '经营单位',name: '单位数',amount1: '不合格数',},{id: '经营单位',name: '品种数',amount1: '总数',},{id: '经营单位',name: '单位数',amount1: '不合格数',},{id: '经营单位',name: '批数',amount1: '总数',},{id: '经营单位',name: '单位数',amount1: '不合格数',}]}},mounted() {},methods:{head({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0) {//这里为了是将第二列的表头隐藏，就形成了合并表头的效果return { padding: 0 }}if (rowIndex === 1) {//这里为了是将第二列的表头隐藏，就形成了合并表头的效果return {display: 'none', padding: 0}}return "background:#f5f7fa"},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {if (rowIndex % 6 === 0) {return {rowspan: 6,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}if (columnIndex === 1) {if (rowIndex % 2 === 0) {return {rowspan: 2,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}}}}
</script><style scoped lang="less">.fa {padding: 10px;border: 1px solid #ccc;}li {padding: 10px;border: 1px solid #ccc;}.line {background-color: #ccc;height: 1px;transform: rotate(6deg);}.first-head{.yplx{margin-left: 200px;}.cyqd{}}
</style>

element 复杂表格，表格合并相关推荐

python合并word表格单元格_Python-Excel转word表格并合并流程
工作中正好接到个小项目需要将Excel数据导出组成word表格并合并所有表格成一个word文档,这个流程涉及到Excel的解析.Word文档的数据插入,多个Word文档的合并,对Word文档插入图片等 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
基于jQuery的jsp表格动态合并
基于jQuery的jsp表格动态合并代码展示代码展示 <tr><th style="text-align: center" >申报编号</th&g ...
html table 表格行合并列合并
目录 1.表格边框合并 2.行合并 3.列合并表格:table 行:tr 列:td 属性: border:边框 width:宽 height:高 bordercolor:变宽颜色 cellspaci ...
bootstrap表格某一列值相同时_Bootstrap-table实现动态合并相同行(表格同名合并)
有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成的(只需要计 ...
计算机函数公式中怎么合并合并,Excel用函数和公式瞬间实现把表格全部合并到一个表中去...
将多张工作表汇总到一张工作表,这是什么意思呢?可以理解为把表格全部合并到一个表中去,之前使用VBA代码实现,本文将教会大家一种快速的方法,用函数和公式瞬间实现多表合并. 例如:有N多个以月份命名的ex ...
python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理
python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表遇到合并单元格时的处理通 ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
LaTex学习教程——插入较复杂的表格（合并、换行以及加标题）
较复杂表格--行列合并注意:需要导入的宏包 \usepackage{multirow} \begin{tabular}{|c|c|c|c|c|}\hline%跨行(将两行合并为一行) 第一个参数指明 ...
easyExcel导出表格及合并单元格
easyExcel导出表格及合并单元格前言废话不多说,直接上效果图. 效果图合并之前导出的: 合并之后导出的: 代码的实现主要是合并之后的,为了更好的分清数据之间的关系. 二.代码目录 < ...

element 复杂表格，表格合并

element 复杂表格，表格合并相关推荐

最新文章

热门文章