动态处理表格多行合并单元格、同时解决hover错乱问题

简介：

el-table单元格合并，处理hover错乱问题，自定义底部合计栏。

如图所示：

源码（复制另存txt，修改.html直接运行）


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style></style>
</head>
<body style="background: #eee;"><div id="app"><el-table :data="tableData" border size='mini' show-summary:summary-method="getSummaries":span-method="objectSpanMethod":row-class-name="rowClassName" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"><el-table-column prop="index" label="序号" width="60"><template slot-scope="scope">{{ scope.$index + 1}}</template></el-table-column><el-table-column prop="name" label="召唤师" min-width='100'></el-table-column><el-table-column prop="like" label="喜欢" min-width='80'></el-table-column><el-table-column prop="sex" label="性别" min-width='100'></el-table-column><el-table-column prop="age" label="年龄" min-width='100'></el-table-column><el-table-column prop="big" label="大招" min-width='180'></el-table-column><el-table-column prop="lv" label="等级" min-width='80'></el-table-column><el-table-column prop="hurt" label="伤害" min-width='100'></el-table-column>                                                                                                                                                                                                                                                                                                                                            </el-table></div>
</body><script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>let time = ''new Vue({el: '#app',data() {return { tableData:[{name:'凯',like:'伽罗',sex:'男',age:'20',big:'魔皇降世：能抗能打',lv:'99',hurt:'10000',},{name:'曜',like:'伽罗',sex:'男',age:'21',big:'七星斩：打不过就跑',lv:'95',hurt:'10000',},{name:'李信',like:'伽罗',sex:'男',age:'19',big:'王非王，侯非侯：1A1A1A',lv:'93',hurt:'10000',},{name:'王昭君',like:'李白',sex:'女',age:'18',big:'和亲抗拒：沉默爆发',lv:'66',hurt:'998',},{name:'杨玉环',like:'李白',sex:'女',age:'19',big:'云想衣裳花想容：超然入圣',lv:'55',hurt:'998',},{name:'伊泽瑞尔',like:'伊泽瑞尔',sex:'男',age:'25',big:'半月斩：代表月亮消灭你',lv:'18',hurt:'1',},],hoverRowLike: -1,}},mounted(){},methods: {//合计 需添加show-summary属性，数组对应行的每列getSummaries(params){return ['合计','自定义展示','自定义展示','10000','10000','10000','10000','10000',]},//合并行objectSpanMethod({ row, column, rowIndex, columnIndex }) {//从那些列需要合并，此处是第三列和第八列if (columnIndex === 2 || columnIndex === 7 ) {//查询相同类型首次出现的index位置，like：同一个类型的标识const i = this.tableData.findIndex( n => n.like == row.like )//计算相同类型出现几次let num = 0this.tableData.map(item =>{if(item.like == row.like){num++}})//rowIndex === i：从首次出现行开始，num：需要合并行数if (rowIndex === i) {return {rowspan: num,colspan: 1};} else {return {rowspan: 0,colspan: 0};}}},// 鼠标进入单元格，记录下当前行的likehandleMouseEnter(row, column, cell, event) {this.hoverRowLike = row.like;},// 给相同like的row添加类名rowClassName({ row, rowIndex }) {if (row.like === this.hoverRowLike) {return 'hover-row';}},// 鼠标离开handleMouseLeave(row, column, cell, event) {this.hoverRowLike = -1;},}})
</script>
</html>

番外篇：

当爹了，我崽儿快满月了，越看越可爱。

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table相关推荐

python pptx 关于在ppt里插入表格，调整合并单元格的问题
python pptx 关于在ppt里插入表格,调整合并单元格的问题需求找到合并了的单元格思路判断是否是合并单元格合并位置的记录合并代码需求首先我这是为了从word里面将内容导到pp ...
PyQT5 （四十六）在 QTableWidget 表格中设置合并单元格的案例
在 QTableWidget 表格中设置合并单元格的案例 setSpan(row, col, 要合并的行数, 要合并的列数) import sysfrom PyQt5 import QtPrintS ...
【VB6.0 数据库连接EXCEL查询合并单元格成功解决办法】
[VB6.0 数据库连接EXCEL查询合并单元格成功解决办法] Private Sub Command1_Click() On Error Resume Next Dim i As Integer, ...
cxgrid 行合并单元格_合并单元格求和、计数、加序号
合并单元格求和同时选中D2:D13单元格区域,编辑栏输入公式后按Ctrl+回车: =SUM(C2:C13)-SUM(D3:D13) 有两个地方需要注意,一是输入公式后,要按Ctrl+回车. 二是注意 ...
Python读取docx表格中的合并单元格信息
目录一.问题背景 1.1 常规写法 1.2 奇怪问题二.发现线索 2.1 前途光明 2.2 道路曲折三.顺藤摸瓜 3.1 找源代码 3.1 分析原因 3.3 取得所需四.破解办法 4.1 找到 ...
用Xlsx xlsx-style 导出excel表格，附带合并单元格，文字居中，文字颜色字体大小等样式 (复制即可实现)
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一.用Xlsx xlsx-style 导出excel表格二.使用步骤 1.安装插件 2.引入总结前 ...
html表格怎么纵向合并单元格,在html中表格如何合并单元格
在html中表格如何合并单元格发布时间:2020-04-28 10:55:12 来源:亿速云阅读:777 作者:小新这篇文章主要为大家详细介绍了在html中表格如何合并单元格,文中示例代码介绍的 ...
Freemarker模板引擎学习，生成html里的动态表格，可合并单元格
需求:现有html模板,需动态填充数据,并且包含表格,表格大小不固定,根据数据多少确定表格大小. 解析:两种方案: 1.java代码实现:将模板文件读出为StringBuffer,找到特定位置,循环生 ...
FreeMarker生成word-定义模板步骤（带表格且含合并单元格）
本文介绍使用freeMark生成包含表格合并单元的word如何制作模板, 合并单元格主要使用 <w:vmerge w:val='restart'/>和<w:vmerge/>实现 ...

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table

简介：

如图所示：

源码（复制另存txt，修改.html直接运行）

番外篇：

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table相关推荐

最新文章

热门文章