element-ui 表格第一列随滚动自动吸顶

最近项目需求:表格中的第一列在滚动的时候,要随着页面的滚动儿滚动。纠结了半天,解决了。记录下来,看能否给碰到类似问题的朋友,提供一些思路。

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190712110724580.gif)

问题

  1. 表格头部的合并
  2. 标题随滚动而滚动

解决

  1. 表格基于element-ui,所以先查看的文档,数据结构刚开始是一级对象中存放着第一列的数据,其中有个树形list,对应后几列的数据,如下:
			tableData: [{
                    id: '1',
                    room_number: '12345',
                    room_name: '大会议室',
                    list: [{
                            equmentName: '投影仪',
                            id: '1',
                            type: '2',
                        },
                        {
                            equmentName: '音箱',
                            id: '2',
                            type: '3',
                        },
                    ]
                }]

可是对照api发现,列之间是平级,要合并的话,就要在第一列渲染的时候,加钩子函数,然后将要合并多少行传给方法,于是重组了下数据,将数据平级展示,同时将子元素的数量,添加到第一列的属性中:

	this.dataList.map(v => {
        if (v.list && v.list.length) {
          const list = v.list.map((val, idx) => {
            if (idx == 0) val['rowspan'] = v.list.length
            val['room_number'] = v['room_number'] + v['room_name']
            val['room_id'] = v['id']
            return val
          })
          arr = arr.concat(list)
        }
      })
      //此时数据
      				data:[{
                            equmentName: '投影仪',
                            id: '1',
                            room_id: '1',
                            room_number: '12345_大会议室',
                            rowspan:2,
                            type: '2',
                        },
                        {
                            equmentName: '音箱',
                            id: '2',
                            room_id: '1',
                            room_number: '12345_大会议室',
                            type: '3',
                        },
                    ]

然后给table,添加钩子函数:

<el-table 
	class="testList" 
	:data="tableData" 
	:span-method="objectSpanMethod"
	 border height='500' 
	 style="width: 100%; margin-top: 20px">
 <el-table>
 methods:{
	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
             if (row['rowspan']) {
                 return {
                     rowspan: row['rowspan'],
                     colspan: 1
                 };
             } else {
                 return {
                     rowspan: 0,
                     colspan: 0
                 };
             }
         }
     }
}

此时第一列合并成功
2. 吸顶
第一列虽然合并成功,但是在项目中是垂直居中的,如果数据较多,不滚动到中间部分是看不到后边的数据属于哪里的。于是就有了吸顶的需求。吸顶基本属性张鑫旭:position: sticky张大佬已经讲解的非常详细了,我们就直说怎么在表格中实现:

//先给对应的列 增加一个控制css
<el-table-column prop="id" label="ID" width="180" class-name='sticky'>
     <template slot-scope="scope">
         <p>{{ scope.row.id }}</p>
     </template>
 </el-table-column>
.sticky {
    vertical-align: top !important;//为了解决刚开始会定位在中间的问题
 }

 .sticky .cell {
     position: sticky; 
     top: 0;
 }

我也没想到困扰半天的需求,最后会是简单的几行css就实现了。css还是强啊。
demo代码

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值