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代码