vue element中table固定多层表头，拖动表头会被遮盖

vue element中table固定多层表头，百度给的解决办法是给个固定宽度，此时在拖动宽时，宽度依然是固定的，扩大的那部分会溢出，并且不会固定，以下是解决此bug的方法

第一步：在<el-table></el-table>上添加 @header-dragend 这个属性,此属性element中有解释：就是“当拖动表头改变了列的宽度的时候会触发该事件”

<el-table :data="dataList" @header-dragend="changeWidth">

第二步：在需要固定的<el-table-column></el-table-column>列上，添加ref="自定义名字"属性,定义一个死宽度，绑定在列上方，同时子元素的宽的合等于定义的变量宽度，其余属性自己添加，下面只是固定问题的属性

  <el-table-column label="门店" :width="storeWidth" ref="oneStore">
  </el-table-column>

 第三步：在@header-dragend 事件中写代码如下，模仿一下代码即可

  changeWidth() {
        this.storeWidth = 0;
        this.$refs.oneStore.columnConfig.realWidt = 0;
        this.storeWidth=this.$refs.oneStore.columnConfig.children.reduce((p,n)=>{
          return p+n.width*1
        },0)
        this.$refs.oneStore.columnConfig.realWidth = this.storeWidth;

 }

 下面是比较全的小dom例子，自己写的，固定两列，

<template>
  <D2Container class="main-page">


     <el-table :data="dataList"
              @header-dragend="changeWidth" >
         <el-table-column label="门" :width="storeWidth"ref="oneStore">
           <el-table-column label="编1" prop="" width="150" ></el-table-column>
           <el-table-column label="店称2" prop="name" width="150"></el-table-column>
     </el-table-column>

      <el-table-column label="合" :width="totalWidth"  fixed="left" ref="twoTotal">
        <el-table-column label="合计1" prop="" width="100" </el-table-column>
        <el-table-column label="合计2" prop="" width="100"></el-table-column>
        <el-table-column label="合计3" prop=""  width="100"></el-table-column>
     </el-table-column>
    </el-table>
  </D2Container>
</template>

<script>
  export default {
    data () {
      return {
        storeWidth:300,
        totalWidth:300,
      }
    },
    methods: {
      changeWidth() {
        this.storeWidth = 0;
        this.$refs.oneStore.columnConfig.realWidt = 0;
        this.storeWidth=this.$refs.oneStore.columnConfig.children.reduce((p,n)=>{
          return p+n.width*1
        },0)
        this.$refs.oneStore.columnConfig.realWidth = this.storeWidth;

        this.totalWidth=0
        this.$refs.twoTotal.columnConfig.realWidt = 0;
        this.totalWidth=this.$refs.twoTotal.columnConfig.children.reduce((p,n)=>{
          return p+n.width*1
        },0)
        this.$refs.twoTotal.columnConfig.realWidth = this.totalWidth;
      },
      }
</script>