elementUI表格合并行

<el-tableborderref="table"height="520":cell-class-name="mergeTableRowCss":span-method="mergeTableRow":data="directoryPriceTableData"><el-table-column header-align="center" label="用电分类"><el-table-columnprop="name"min-width="110"label="一级用电分类"></el-table-column><el-table-columnprop="name2"min-width="110"label="二级用电分类"></el-table-column></el-table-column><el-table-columnheader-align="center"label="电度电价（含政府性基金及附加）"><el-table-columnprop="prc01"width="100"label=" 220 - 380伏"></el-table-column><el-table-columnprop="prc02"width="90"label="1 - 10千伏"></el-table-column><el-table-columnprop="prc03"label="10 - 20千伏"width="100"></el-table-column><el-table-columnprop="prc04"label="35 - 110千伏"width="110"></el-table-column><el-table-columnprop="prc05"label="110 - 220千伏"width="120"></el-table-column><el-table-columnprop="prc06"label="220 - 500千伏"width="120"></el-table-column><el-table-columnprop="prc07"label=" 500 - 750千伏"width="120"></el-table-column><el-table-columnprop="prc08"label="750千伏及以上"width="120"></el-table-column></el-table-column><el-table-column header-align="center" label="基本电价"><el-table-columnprop="capPrc"width="170"label="最大需量（元/千瓦/月）"></el-table-column><el-table-columnprop="dmdPrc"width="200"label="变压器容量（元/千伏安/月）"></el-table-column></el-table-column></el-table>

getData(){// 获取数据后调用封装的方法this.directoryPriceTableData = this.mergeTableRowMethod(res.result, ["name"]);// 意思是name的列有重复的值就要合并
},
// 被合并行的样式
mergeTableRowCss({ row, column, rowIndex, columnIndex }) {console.log(row, column, rowIndex, columnIndex);if (columnIndex === 0 || columnIndex === 1) {return "table-header-css";}},// elementUI的合并行方法mergeTableRow({ row, column, rowIndex, columnIndex }) {// console.log(row, column, rowIndex, columnIndex);const span = column["property"] + "-span";if (row[span]) {return row[span];}},// 封装合并行逻辑mergeTableRowMethod(data, merge) {if (!merge || merge.length === 0) {return data;}merge.forEach((m) => {const mList = {};data = data.map((v, index) => {const rowVal = v[m];if (mList[rowVal] && mList[rowVal].newIndex === index) {mList[rowVal]["num"]++;mList[rowVal]["newIndex"]++;data[mList[rowVal]["index"]][m + "-span"].rowspan++;v[m + "-span"] = {rowspan: 0,colspan: 0,};} else {mList[rowVal] = { num: 1, index: index, newIndex: index + 1 };v[m + "-span"] = {rowspan: 1,colspan: 1,};}return v;});});return data;},

/deep/.el-table__body tr:hover > td.table-header-css {background-color: #fff0e3 !important;
}/deep/.table-header-css {background-color: #fff0e3;
}

elementUI表格合并行相关推荐

iview 表格合并行
// 合并表格方法handleSpan ({ row, column, rowIndex, columnIndex }) {// console.log(column)if (column.merge ...
表格合并行_Word制作验收单表格，很简单，快来学习吧
作者:图文设计师东东办公软件Word制作一款简单的验收单表格,方法很简单,大家一起来学习吧! 第一步.新建.插入表格打开Word新建--空白文档,输入标题"验收单".如下图. ...
elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
Ant Design之表格动态合并行
在web开发中,表格的行合并是一个很常见的需求.antd也提供了这种功能,但是文档中的示例代码却和我想象中的相差甚远,如下所示,它是通过一种很笨的办法实现的行合并.这样当表格的数据源是动态获取的,我们 ...
elementUI表格树动态合并列问题处理（最终版，---新需求）
在之前的一篇博客中针对这个问题,写了解决方法.现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正. 目前表格的需求是: 评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并:指标 ...
elementui表格根据后端返回的数据进行合并表格
害嗨海大家好,我又回来了.最近有小伙伴问了我这样一个问题,就是现在我调取接口,获取了一批表格数据,然后显示在页面上,但是要根据每行的id以及那一列的内容进行合并,然后还有添加子数据,编辑删除等操作(这 ...
java操作导出Excel（jxl导出WritableWorkbook）jxl合并单元格,单元格的设置，单元格居中、字体、大小、换行、合并行，列宽、自动换行撑起高度、指定特定字符串样式等
new WritableCellFormat().setWrap(true);//通过调整宽度和高度自动换行 1.1 需求描述 MS的电子表格(Excel)是Office的重要成员,是保存统计 ...
rowspan 动态变化_rowspan相同值合并怎么动态的rowspan合并行
php 怎么控制表格,相同数据合并显示一行 Html中colspan属性和rowspan属性合并后该单元格的一个是合并行.一个合并列 colspan=2就代表合并他和他同一列的后一个单元格 rowsp ...
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...

elementUI表格合并行

elementUI表格合并行相关推荐

最新文章

热门文章