最近项目需求:表格中的第一列在滚动的时候,要随着页面的滚动儿滚动。纠结了半天,解决了。记录下来,看能否给碰到类似问题的朋友,提供一些思路。
效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190712110724580.gif)
问题
- 表格头部的合并
- 标题随滚动而滚动
解决
- 表格基于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代码