项目场景:

项目场景:elementUI的el-table组件,要做到的效果是:多级表头,前两大列固定,后面的列横向滚动。
第一大列固定;第二大列默认隐藏,点击多选框才展示对应的数据,为动态展示的列。


问题描述

    <el-table
      :data="list"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change="sortChange"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.6)"
    >
        
      <el-table-column fixed :min-width="width" v-for="(item, i) in titleArrTime" :prop="item.value" :label="item.label" :key="i"></el-table-column>
        
      <!-- <template > -->
        <el-table-column v-if="sortable > 0" width="160" ref="weidu" label="维度" fixed>
          <el-table-column :min-width="width" v-for="(item, i) in titleArrWeidu" :prop="item.value" :label="item.label" :key="i"></el-table-column>
        </el-table-column>
      <!-- </template> -->
      
      <el-table-column label="当日回流用户指标">
        <el-table-column sortable :min-width="width" v-for="(item, i) in titleArrDay" :prop="item.value" :label="item.label" :key="i"></el-table-column>
      </el-table-column>

      <el-table-column>
        <div class="flex align-items-center justify-content-center" slot="header">
          <div class="margin-right">总回流用户指标</div>
          <condition @change="filterChange" :keyList="keyList"></condition>
        </div>
        <el-table-column sortable :min-width="width" v-for="(item, i) in titleArrAll" :prop="item.value" :label="item.label" :key="i"></el-table-column>
      </el-table-column>

      <div slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-table>

** 这里要固定的前两列中,第一列没有el-table-column嵌套,第二列el-table-column里面嵌套el-table-column,这样的效果就是第一列有一层表头,第二列有两层表头,让前两列都固定,给前两列的最外层的el-table-column 添加fixed属性。查看页面,问题出现,第二列添加fixed之后的宽度一直不对,没有展示全部内容。**

在这里插入图片描述


原因分析:

第二大列的宽度没有被撑开,查看控制台class名为el-table__fixed的div是固定的部分。
我这里猜测:在elementUI中这种嵌套的el-table-column可能没有计算对宽度,对动态的表格宽度可能因为浏览器的渲染顺序,导数据还没有过来,页面就渲染完了,所以宽度计算的不正确。
也有可能是其他原因,希望知道这是什么原因的大神告诉我。


解决方案:

所以:当点击多选框时,触发计算第二列宽度的方法,给第二列设置宽度。
1、先给第二列一个默认宽度
在这里插入图片描述

2、监听sortable的变化,每次变化都要计算宽度。sortable默认为0
在这里插入图片描述

这种办法其实不太友好,因为vue是不提倡通过获取元素来修改样式的。
如果还有什么解决办法,希望各位大神给我留言。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐