elementui table 固定列_elementUI Table组件 如何设置合并列
效果图：
image.png
代码如下：
:data="tableData"
style="width:200px"
:border="true"
:span-method="objectSpanMethod"
>
prop="month"
label="月份"
>
prop="year"
label="年份"
>
export default {
data() {
return {
tableData: [{"attendTrainingPersonnel":"全区区管干部必学，鼓励其他干部选学","month":4,"teacherMisassignments":"中央党校(国家行政学院)李志勇","title":"关于国家治理现代化的几个问题","typeName":"十九届四中全会精神轮训","year":2020},{"attendTrainingPersonnel":"全区区管干部必学，鼓励其他干部选学","month":4,"teacherMisassignments":"中央党校(国家行政学院)李志勇","title":"关于国家治理现代化的几个问题","typeName":"十九届四中全会精神轮训","year":2020}]
}
},
mounted(){
let tableData = this.tableData;
let tempDetailslistMonth = {};
tableData.map(item => {
if(tempDetailslistMonth[item.month]){
tempDetailslistMonth[item.month]++;
item.showMonth = false;
return item;
}
else{
tempDetailslistMonth[item.month] = 1;
item.showMonth = true;
return item;
}
});
this.tempDetailslistMonth = tempDetailslistMonth;
},
methods : {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//rowIndex：行 columnIndex：列
let {tableData} = this;
if(columnIndex == 0){ //只对第一列的数据(月份)可能进行合并列
// 如果这个月已经展示了，就不要再展示了
if(row.showMonth){
return {
rowspan : this.tempDetailslistMonth[tableData[rowIndex].month],
colspan: 1
}
}
else{
return {
rowspan : 0,
colspan: 0
}
}
}
}
}
}
elementui table 固定列_elementUI Table组件 如何设置合并列相关推荐
- elementui table 固定列_element-ui 中的table的列隐藏问题解决
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
- bootstrap table固定列导致复选框失效的解决方法
//获取选中多行数据 function getSelectedRow_st() {//解決固定列导致选择复选框选不中的问题//首先判断表格是否为固定列表格,使用bootstrapTable('getO ...
- Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
- 解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条根本拖不动,只能在固定列外面 靠点击来让它过来. 查找原因你会 ...
- Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
- html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言 最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
- table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- Table固定列和表头
一.实现思路:表格数据中存在合并单元格,网上找了好多列子都没有实现.最后是把一个table拆分为两个table实现的,第一个table(table1)中是需要固定的列及表头(表头只固定前四列和时段流量 ...
- html 把table固定住,html Table实现表头固定
合同号签约客户发布客户合同状态选定条件的发布周期额度 看看css *{ padding:0; margin:0; } th{ border:1px solid #e6e6e6; line-height ...
最新文章
- C++实现Hash表
- tensorflow函数方法
- 目标检测算法YOLOv4详解
- asp.net站点时间格式与系统时间格式不一致。手动修改
- c语言输出11258循环,c/c++内存机制（一）（转）
- dubbo简易实现_分别利用自定义的注册中心和zookeeper
- 坚果pro2刷机分享
- 使用RateLimiter完成简单的大流量限流
- 局域网服务器文件夹加密软件,企业局域网共享文件夹加密软件、局域网共享文件访问控制软件的使用...
- 数值分析复习（六）——常微分方程数值解法
- Java base64转inputStream
- （二）立创EDA之新建工程，原理图，PCB
- 浏览器及app消息推送
- 博士科研论坛和一些学者研究
- [技术分享 – FCS 篇] 驭龙五式5之神龙摆尾：如果没有 WSUS…
- quot;title_activity_distquot; is not translated in quot;zh-rCNquot; (Chinese: China)
- 大型语言模型综述（二）
- Pytorch中维度dim的理解使用
- 猫眼api html,猫眼电影数据抓取
- 为什么每个人都对 Web3 如此困惑