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

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

效果图

![在这里插入图片描述](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.lengthval['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代码

element-ui 表格第一列随滚动自动吸顶相关推荐

element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是 ...
Element Ui 表格固定列，出现底部和右侧空白的问题
一.以固定右侧列为例: <el-table-column fixed="right" prop="address" width="100px&q ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
html表格第一列和最后一列冻结
html表格第一列和最后一列冻结阿闰使用div思路,div溢出滚动, js动态获取宽度, 缺陷,滚动条不是很美观 .zuo{ width: 15%; height: 100%; /* border ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...

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

效果图

问题

解决

element-ui 表格第一列随滚动自动吸顶相关推荐

最新文章

热门文章