el table 固定表头和首行_element table 固定部分二级表头

项目用vue+element开发,需求如下:

表格为二级表头,一级表头下有多个二级表头,需要固定部分二级表头列在表格左侧

解决思路如下:

1.固定一级表头的列

此时问题如下,固定一级表头的列之后,表格第一列会固定但只会显示一定的宽度

问题1

2.计算需要固定的二级表头列的宽度(如我需要固定三列,每列200px,则为600px),把一级表头列的宽度设置为这个数值

此时问题如下,需要固定的三列可以固定且正常显示,但是一级表头之下的其他列显示为空白

问题2

3.把空白部分通过修改样式显示出来

通过F12查看,空白部分是有值的,那只要把他显示出来就可以了

image.png

最终效果如下:

最终效果.gif

完整代码如下:

import Sortable from 'sortablejs'

export default{

data(){

return{

tableData: [{date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},

{ date: '2016-05-02'