element table 固定部分二级表头

项目用vue+element开发,需求如下:
表格为二级表头,一级表头下有多个二级表头,需要固定部分二级表头列在表格左侧

解决思路如下:

1.固定一级表头的列

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

 

问题1

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

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

问题2

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

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

 
最终效果如下:

 

最终效果

完整代码如下:

<template>
  <div>
    <el-table :data='tableData' style="width: 100%;">
      <el-table-column label="地址" width="600" fixed="left">
        <el-table-column prop="province" label="省份" width="200"></el-table-column>
        <el-table-column prop="city" label="市区" width="200"></el-table-column>
        <el-table-column prop="address" label="地址" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编1" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编2" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编3" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编4" width="200"></el-table-column>
        <el-table-column prop="zip" label="邮编5" width="200"></el-table-column>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="200"></el-table-column>
      <el-table-column prop="name" label="姓名" width="200"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  export default{
    data(){
      return{
        tableData: [{date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333},
        { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333}]
      }
    },
  }
</script>

<style scoped>
　重要代码
  /deep/ .el-table th.is-hidden>*, /deep/ .el-table td.is-hidden>* {
    visibility: visible
  }
</style>

转载自https://www.jianshu.com/p/820d5071a49d