table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码

最新推荐文章于 2024-05-22 08:30:00 发布
最新推荐文章于 2024-05-22 08:30:00 发布
阅读量772 收藏
点赞数
文章标签： table多行表头合并 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39634508/article/details/111555797
版权
本文介绍了如何在Vue项目中使用ElementUI动态渲染表格表头，通过维护`headerDatas`对象来实现自定义表头。同时，详细展示了如何实现表格的行合并功能，通过`span-method`属性结合条件判断来控制`rowspan`和`colspan`，以满足复杂的表格展示需求。
摘要由CSDN通过智能技术生成

最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。

但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。

而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。

1、自定义表头

代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，headerDatas.label其实就是表头的值，如果表头是“序号”，那么headerDatas.label="序号"，在TableData中构建TableData[序号]= 1 这样的map对象，就可以动态渲染出想要的表格

:data="TableData"

:height="tableHeight"

:row-class-name="showEmergencyLine"

border

element-loading-spinner="el-icon-loading"

element-loading-text="拼命加载中"

@selection-change="handleSelectionChange"

v-loading.lock="TableLoading"

@header-dragend="changeHeaderWidth"

>

最低0.47元/天 解锁文章
weixin_39634508
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【table】复杂表格示例，多行表头，包含横表头+纵表头
芳草萋萋鹦鹉洲哦
07-26 3604
【table】复杂表格示例，多行表头，包含横表头+纵表头
vue elementui 复杂表头 table
然后他就拿棍子来打我
10-02 1万+
1. elementUI 实现复杂表格 表头由多行多列组成， 左侧和右侧部分列固定， 中间部分为动态列 最终效果图 1.1 表格实现 HtML 内容 <el-table :data="tableData" style="width: 100%" ref="tableRef" :header-cell-style="rowspanStyle" > <!-- left --> <el-table-column label="label-lef.
el-table表格合并头，多级表头，合并列，合并列数据处理（2024-05-22）
最新发布
hap1994的博客
05-22 1038
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。标签按照合并的层级放置标签即可实现，数据是正常的二维数据。表头多级且合并。
el-table 表头合并
chen_wei_yx的博客
05-11 5373
理解这个之后，其实代码也就很好理解了，找到表头这一行要合并的两列，将第一列的colSpan设为2，代表单元格可以占据两列，将第二列隐藏。合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时，让第二列占据两个单元格的宽度来实现合并效果。效果如下，圈起来的是一个表头对应两列，这里是多级表头（本篇借鉴而来，如有需要请留言删除！如上就是列头合并，接来下是内容合并，依据列中的值进行表格合并，也可以多条件多单元格合并。比如说表头是第一行，行号是0，表头第一行第一列，行号和列号都是0。
Ant design vue table 合并写法（详细代码-行合并）
qq_43468165的博客
01-05 4474
ant design vue table 列合并 含有详细实现代码
论element-ui表格的合并行和列（巨细节）
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
vue elementUI table 自定义表头和行合并的实例代码
10-16
主要介绍了vue elementUI table 自定义表头和行合并的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
vue+render+jsx实现可编辑动态多级表头table的实例代码
10-15
主要介绍了vue+render+jsx实现可编辑动态多级表头table的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的工作或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue el-table实现自定义表头
12-30
本文实例为大家分享了vue el-table实现自定义表头的具体代码，供大家参考，具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头。 文档说明如下： 代码实现： visible.sync=isShow before-close...
【HTML】table表格拆分合并（colspan、rowspan）
热门推荐
04-19 17万+
代码演示 横向合并：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
antd表格table多行多列合并
Y_soon_start的博客
08-15 1954
antd表格table多行多列合并
elementui 表头合并，两列共用一个表头，header-cell-style设置表头样式
weixin_43842567的博客
03-26 4923
下图是要实现的效果 HTML 通过header-cell-style给table表头设置样式 <el-table :data="tableData" style="width: 100%" :header-cell-style="rowClass"> <el-table-column label="建设任务内容" min-width="200"> <el-table-column label="" prop="projectName" show-o
Ant Design中Table表单行列合并
lydia_love的博客
07-14 9991
Ant Design中Table表单行列合并Table组件实现方法 Table组件 前几天，客户有个需求，就是把一个excel表做成一个页面，里面的行列都可能会合并。 类似这种的： 一般第一步都会先看一下ant design的文档，看看是否有相似的。最后发现是有相似的页面。像这种： 但是我当时就仅仅只关注了Table组件的colSpan这个属性，这个在这个上面是写死的，当时可能是脑子秀逗了，不...
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
Vue+Element 一个表头对应两列
qq_32687373的博客
09-10 4163
以elementui表格下的第一个示例为基础做的修改，header-cell-style的使用 HTML <el-table :data="tableData" style="width: 100%" :header-cell-style="rowClass"> <el-table-column label="日期"> <el-table-column prop="date" width="180"></el-table-column>
vue antd a-table 合并相同列的单元格
weixin_45231437的博客
04-13 1267
vue antd a-table 合并相同列的单元格
vue table 自定义表头和行合并的实例代码
09-07
下面是一个基于Vue的表格组件示例代码，包含自定义表头和行合并功能： ```html <template> <div> <table> <thead> <tr> <!-- 自定义表头 --> <th colspan="2">姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <!-- 行合并 --> <template v-if="index === 0 || item.name !== tableData[index - 1].name"> <td :rowspan="getRowCount(item.name)">{{ item.name }}</td> </template> <td>{{ item.nickname }}</td> <td>{{ item.age }}</td> <td>{{ item.gender }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', nickname: '三三', age: 25, gender: '男' }, { name: '李四', nickname: '四四', age: 28, gender: '男' }, { name: '张三', nickname: '三三', age: 30, gender: '男' }, { name: '王五', nickname: '五五', age: 22, gender: '女' }, ], }; }, methods: { getRowCount(name) { let count = 0; for (let item of this.tableData) { if (item.name === name) { count++; } } return count; }, }, }; </script> ``` 在上述代码中，自定义的表头使用`colspan="2"`来合并单元格，使得“姓名”占据两列。行合并使用`getRowCount()`方法计算每个姓名相同的行的数量，然后通过`rowspan`属性设置`<td>`元素的跨行数。这样，当姓名相同的行合并在一起时，姓名单元格会跨越相应的行数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值