Element table设置固定列，没有滚动条时底部会显示一条线的解决方法

tianyawhl

发布于 2020-07-06 23:24:05

4.8K0

发布于 2020-07-06 23:24:05

固定列需要在el-table-column 上设置fixed属性，它接受Boolean值或者left right,表示左边固定还是右边固定

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
   <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

在小屏幕上含有滚动条，显示是正常的，但是如果是大屏幕没有滚动条就在底部约17像素的地方有一条线，非常不美观，

通过审查元素发现，如果是左侧固定，不管有没有滚动条.el-table-fixed 这个元素样式都是距离底部17px，

固定右边的列类似，只是样式没有直接写bottom:17px

如何解决呢？

思路：页面解析完成后，如果内容的宽度小于或者等于容器的宽度就把bottom设置为1px

完整的代码

  mounted() {
    //修改固定列有和没有滚动条的样式
    var wrapWidth = document.querySelector(".el-table__header-wrapper").offsetWidth;
    var tableWidth;
    setTimeout(() => {
      tableWidth = document.querySelector(".el-table__header").offsetWidth - 17;
      console.log(wrapWidth, tableWidth);
      document.querySelector(".el-table__fixed-right").style.height = "auto";
      document.querySelector(".el-table__fixed-right").style.bottom = "17px";
      if (tableWidth <= wrapWidth) {
        document.querySelector(".el-table__fixed").style.bottom = "1px";
        document.querySelector(".el-table__fixed-right").style.bottom = "1px";
      }
    }, 500);
   },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

boolean