【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

这篇具有很好参考价值的文章主要介绍了【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、表格滚动条样式修改

        element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。

原生滚动条样式

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

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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滚动条样式

/* ---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);
  }
}

效果图:

el-table-column超出隐藏,框架&UI库,Vue3项目,前端,css,vue.js

二、表格固定列设置fixed属性后,和原生样式冲突

        el-table设置了自定义样式后,为el-table-column添加fixed="right"属性,此时表格侧边栏固定列出现样式错乱,自定义样式不生效。

// 固定列表头
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;
}

原图:固定列样式与自定义的el-table整体样式不一致

el-table-column超出隐藏,框架&UI库,Vue3项目,前端,css,vue.js

 效果图

el-table-column超出隐藏,框架&UI库,Vue3项目,前端,css,vue.js

三、表头内容超出部分隐藏

        el-table表身内容可以通过show-overflow-tooltip属性,快捷设置内容超出部分隐藏,但表头部分则需要利用插槽手动判断内容长度,是否显示省略号及tooltip。

        首先需要设置el-table-column的min-width属性。然后通过header插槽查找DOM判断宽度动态展示el-tooltip

Vue2参考代码:

 <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 修改代码文章来源地址https://www.toymoban.com/news/detail-520531.html

// 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;
}

到了这里,关于【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包