elementUI 表格合并单元格-多层级-合并行

需求：使用vue + elementUI 实现如下表格：

省份	城市	区域	人口
贵州	遵义	汇川区	100
		红花岗区	100
		播州区	100
	贵阳	南明区	100
	贵阳	云岩区	100
	安顺	西秀区	100
		平坝区	100
		开发区	100
	铜仁	万山区	100
广东	深圳	南山区	100

实现:

html部分

<el-table :data="tableData" :span-method="objectSpanMethod"><el-table-column v-for="column in columns" :key="column.field" :prop="column.field" :label="column.name"><template slot-scope="scope">{{scope.row[column.field]}}</template></el-table-column>
</el-table>

js部分

export default {data() {return {tableData: [......],column: [{name: '省份',field: 'province',},{name: '城市',field: 'city',},{name: '区域',field: 'region',},{name: '人口',field: 'population',},],}},created(){//使用loadsh排序函数先对省份和城市进行排序。this.tableData = _.orderBy(this.tableData,['province','city'],['desc','desc']);//计算需要合并的行数先合并province，在合并citythis.setTabelRowSpan(this.tableData, ['province','city']);},methods: {setTabelRowSpan(tableData, fieldArr){let lastItem = {};fieldArr.forEach((field, index) => {tableData.forEach(item => {item.mergeCell = fieldArr;const rowSpan = `rowspan_${field}`//判断是否合并到上个单元格。if(fieldArr.slice(0, index + 1).every(e => lastItem[e] == item[e])){//是：合并行item[rowSpan] = 0;lastItem[rowSpan] += 1;}else{//否：完成一次同类合并。lastItem重新赋值，进入下一次合并计算。item[rowSpan] = 1;lastItem = item;}})})},objectSpanMethod({ row, column, rowIndex, columnIndex }) {//判断当前单元格是否需要合并if(row.mergeCell.includes(column.property)){const rowspan = row[`rowspan_${column.property}`]if (rowspan) {return { rowspan: rowspan,colspan: 1};} else {return { rowspan: 0,colspan: 0};}},}
}

elementUI 表格合并单元格-多层级-合并行相关推荐

elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rows ...
elementUI表格----合并单元格
直接复制到文件中,看看就能明白怎么用原文地址: https://blog.csdn.net/qq_14993591/article/details/124048897 <template> ...
记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
ElementUI el-table合并单元格
VUE项目中经常遇到table表格合并单元格的需求,el-table组件支持自定义单元格合并(:span-method="objectSpanMethod"),即将某一属性值相同的 ...
html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
layui实现表格合并单元格，设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

elementUI 表格合并单元格-多层级-合并行

elementUI 表格合并单元格-多层级-合并行

需求：使用vue + elementUI 实现如下表格：

实现:

elementUI 表格合并单元格-多层级-合并行相关推荐

最新文章

热门文章