一、表格滚动条样式修改
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);
}
}效果图：
二、表格固定列设置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表身内容可以通过show-overflow-tooltip属性，快捷设置内容超出部分隐藏，但表头部分则需要利用插槽手动判断内容长度，是否显示省略号及tooltip。
首先需要设置el-table-column的min-width属性。然后通过header插槽查找DOM判断宽度动态展示el-tooltip
Vue2参考代码：文章来源：https://www.toymoban.com/news/detail-520531.html
<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模板网！
