[Vue3+element plus] el-table scroll bar, fixed column fixed, table header beyond content hide and display ellipsis

1. Modification of table scroll bar style

        The el-table in element plus uses el-scrollbar, which cannot be modified with the global default scroll bar style, and the public style needs to be written separately.

native scrollbar style

/* ---滚动条公共样式--- */

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/
  border-radius: 0px; /*轨道背景区域的圆角*/
  background-color: transparent; /*轨道的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 2px; /*滑块圆角*/
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/
  background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/
}

el-table scroll bar style

/* ---el-table滚动条公共样式--- */
.el-scrollbar {
  // 横向滚动条
  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    opacity: 1; // 默认滚动条自带透明度
    height: 8px; // 横向滑块的宽度
    border-radius: 2px; // 圆角度数
    background-color: rgba(136, 219, 255, 1); // 滑块背景色
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
  }
  // 纵向滚动条
  .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    opacity: 1;
    width: 8px; // 纵向滑块的宽度
    border-radius: 2px;
    background-color: rgba(136, 219, 255, 1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
}

Renderings:

2. After setting the fixed attribute in the fixed column of the table, it conflicts with the native style

        After el-table sets a custom style, add the fixed="right" attribute to el-table-column. At this time, the style of the fixed column in the sidebar of the table is disordered, and the custom style does not take effect.

// 固定列表头
thead .el-table-fixed-column--right {
  background-image: -webkit-linear-gradient(
    bottom,
    var(--bg1),
    var(--bg2)
  ) !important;
  padding: 0;
  color: var(--text1);
  font-size: 16px;
}

// 固定列表身
tbody .el-table-fixed-column--right {
  background-color: #072d48 !important;
}

Original image: The fixed column style is inconsistent with the overall style of the custom el-table

 renderings

3. The content of the header exceeds the hidden part

        The content of the el-table table body can be quickly set to hide the excess content through the show-overflow-tooltip attribute, but the header part needs to use the slot to manually determine the length of the content, and whether to display the ellipsis and tooltip.

        First, you need to set the min-width attribute of el-table-column. Then use the header slot to find the DOM to judge the width and dynamically display the el-tooltip

Vue2 reference code:

 <el-table :data="data_list" style="width: 100%; font-size: 14px;" border>
   <template v-for="(item,index) in tableCol">
     <el-table-column
        :key="index"
         :prop="item.prop"
         :label="item.label"
         :min-width="item.minWidth"
         :show-overflow-tooltip="true"
      >
       <template slot-scope="scope" slot="header">
         <div @onMouseOver="onMouseOver('refName' + scope.$index)">
           <el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top">
              <div class="title">
                 <span :ref="'refName' + scope.$index">{
   
   {item.label}}</span>
              </div>
           </el-tooltip>
         </div>
       </template>
      </el-table-column>
   </template>
 </el-table>
 
 
 onMouseOver(refName) {
   let parentWidth = this.$refs[refName][0].parentNode.offsetWidth;
   let contentWidth = this.$refs[refName][0].offsetWidth;
   // 判断是否开启tooltip功能
   if (contentWidth > parentWidth) {
     this.isShowTooltip = false;
   } else {
     this.isShowTooltip = true;
   }
 },
 
//style
.title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

Vue3 modify code

// HTML部分
    <el-table :data="tableData" row-class-name="my-table">
      <el-table-column
        v-for="th in tableHeaderList"
        :key="th?.Field"
        :prop="th?.Field"
        :label="th?.Comment"
        min-width="90"
        :show-overflow-tooltip="true"
        :sortable="th?.sort"
      >
        <template #header="scope">
          <div @mouseenter="handleMouseEnter(scope)">
            <el-tooltip
              :disabled="isShowTooltip"
              :content="th?.Comment"
              placement="top"
            >
              <div class="title">
                <span>{
   
   { th?.Comment }}</span>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    <el-table>

// JS部分
let isShowTooltip = ref(false);

// 判断表头单列字符长度
const handleMouseEnter = scope => {
  let dom = document.querySelector(`.${scope.column.id} span`);
  let parent = document.querySelector(`.${scope.column.id} .title`);
  // 获取自身的宽度
  let contentWidth = dom.offsetWidth;
  // 获取父元素的宽度
  let parentWidth = parent.offsetWidth;
  // 判断是否开启tooltip功能
  if (contentWidth > parentWidth) {
    isShowTooltip.value = false;
  } else {
    isShowTooltip.value = true;
  }
};

// CSS部分
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}