当前位置：首页 > article >正文

解决表格出现滚动条样式错乱问题

article 2024/11/13 20:03:49

自定义表格出现滚动条时，会因为宽度不对等导致样式错乱；
在这里插入图片描述
解决思路：
监听表格数据的变化，当表格出现滚动条时，再调用更新宽度的方法updateWidth，去改变表格头部的宽度，最终保持表格头部和内容对齐。
一、监听数据变化并更新宽度

二、给dom元素设置ref属性，方便后续获取宽度
在这里插入图片描述

updateWidth() {
      this.$nextTick(() => {
        if (this.$refs.otherColBodyBoxRef) {
          const newWidth = this.$refs.otherColBodyBoxRef.clientWidth;
          const progressContentRefWidth =
            this.$refs.progressContentRef.clientWidth;
          if (progressContentRefWidth - newWidth > 101) {
            // 滚动条
            this.customHeaderWidth = "calc(100% - 6px)";
          } else {
            this.customHeaderWidth = "100%";
          }
        }
      });
    },
  //progressContentRef是最外层大盒子的宽度

最终效果如下：
在这里插入图片描述