el-table——可合并单元格的表格
<el-table
v-loading="loading"
:data="tableData"
border
:span-method="colSpanMethod"
> </el-table>
//需要的合并效果:data
spanArrs: {
amount1: [], // 合并单元格的参数
amount2: []
}
// 合并列函数:methods
colSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (this.spanArrs[column.property] && columnIndex < 1) { //
const _row = this.spanArrs[column.property][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
},
// 计算合并个数:key代表需要合并的参数
getSpanArr (data, key) {
let spanArr = []
let spanIndex = null
if (data == null) {
return []
} else {
for (let i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1)
spanIndex = 0
} else {
if (data[i][key] === data[i - 1][key]) {
spanArr[spanIndex] += 1
spanArr.push(0)
} else {
spanArr.push(1)
spanIndex = i
}
}
}
return spanArr
}
},
// 排序:可以让后台返回排序后的内容,避免合并后内容不对应
sortBy (attr, rev) {
if (!rev) {
rev = 1
} else {
rev = (rev) ? 1 : -1
}
return function (a, b) {
a = a[attr].toLowerCase()
b = b[attr].toLowerCase()
if (a < b) {
return rev * -1
}
if (a > b) {
return rev * 1
}
return 0
}
},
el-table——可合并单元格的表格的更多相关文章
- 前端Excel表格导入导出,包括合并单元格,表格自定义样式等
表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- css table之合并单元格
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...
- table JS合并单元格
function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...
- html table动态合并单元格 js方法
<script> $(document).ready(function(){ function mc(tableId, startRow, endRow, col) { var tb = ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- 复杂的POI导出Excel表格(多行表头、合并单元格)
poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...
- layui:数据表格如何合并单元格
layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...
随机推荐
- python 中 staticmethod 和 classmethod有什么区别
面试中经常会问到staticmethod 和 classmethod有什么区别? 首先看下官方的解释: staticmethod: class staticmethod staticmethod(fu ...
- 怎样加入社区项目Karbor的Review?
Review是社区衡量一个贡献者的重要标准. Review步骤: 1.登录Karbor Review地址: https://review.openstack.org/#/q/Karbor 这里可以看到 ...
- Mysql的安全配置向导命令mysql_secure_installation
mysql_secure_installation安全配置向导 [root@youxi1 ~]# mysql_secure_installation Securing the MySQL server ...
- ALV显示金额字段值扩大100倍
内表数据 物料 库位 期末庫存金額F0D7004DSA 1PYF 701410.944F0D7004DSA 1SNT ...
- spark:neither spark.yarn.jars not spark.yarn.archive is set
1.Spark启动警告:neither spark.yarn.jars not spark.yarn.archive is set,falling back to uploading librarie ...
- 02. oc语言是动态语言
参照着知乎上大神们给的解释,(https://www.zhihu.com/question/19918532)自己要总结下知识: 自己初级并没有理解 动态.静态.强类型.弱类型 语言的这些含义,区分. ...
- 【c# 学习笔记】子类的初始化顺序
使用了继承之后,当我们初始化一个子类时,除了会调用子类的构造函数外,同时也会调用基类的构造函数.子类的初始化顺序如下: ① 初始化类的实例字段: ② 调用基类的构造函数,如果没有指明基类,则调用Sys ...
- 【CUDA开发】论CUDA和LAV解码器是否真的实用
先说配置,我电脑E3V3+GTX780TI视频就一个普通的720P AVC1编码MP4视频,实时检测软件是CPU-Z和GPU-Z,AIDA64[全默认设置]全部用ptoplayer默认播放时候,播放3 ...
- php 之分页
$a=$_FILES; // print_r($a);die; foreach ($a as $key => $value) { $k=$key; } // $_FILES['license'] ...
- MySQL的sql语言分类DML、DQL、DDL、DCL
SQL语言一共分为4大类:数据定义语言DDL,数据操纵语言DML,数据查询语言DQL,数据控制语言DCL 1.数据定义语言DDL(Data Definition Language) 对象: 数据库和表 ...