el-table-column嵌套el-table-column ,多级表头横向滚动的bug

项目场景:

项目场景: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是不提倡通过获取元素来修改样式的。
如果还有什么解决办法,希望各位大神给我留言。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-tableel-table-columnElement UI库中的两个组件,用于展示表格数据。自定义指令可以用于对el-tableel-table-column进行扩展和定制。 对于el-table,可以使用自定义指令来实现一些特定的功能,比如自定义排序、拖拽列宽、固定表头等。通过自定义指令,可以在el-table上添加一些额外的行为或样式。 对于el-table-column,可以使用自定义指令来实现一些特定的列样式或行为。比如,可以通过自定义指令来实现某一列的特殊渲染、列宽自适应等功能。 下面是一个示例,展示如何使用自定义指令来扩展el-tableel-table-column: 1. 创建一个自定义指令: ```javascript Vue.directive('my-directive', { bind: function (el, binding, vnode) { // 在绑定时执行的逻辑 // 可以在这里修改el-tableel-table-column的行为或样式 }, inserted: function (el, binding, vnode) { // 在元素插入到DOM时执行的逻辑 }, update: function (el, binding, vnode, oldVnode) { // 在组件更新时执行的逻辑 }, componentUpdated: function (el, binding, vnode, oldVnode) { // 在组件更新完成后执行的逻辑 }, unbind: function (el, binding, vnode) { // 在解绑时执行的逻辑 } }); ``` 2. 在el-tableel-table-column上使用自定义指令: ```html <el-table v-my-directive> <!-- 表格内容 --> </el-table> <el-table-column v-my-directive> <!-- 列内容 --> </el-table-column> ``` 通过上述方式,你可以根据自己的需求来扩展和定制el-tableel-table-column的行为和样式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值