el-table自定义样式,表头固定,数据过多时滚动

最终效果:(此处没体现出来滚动,数据没那么多)
1.表头固定,设置表头样式,修改表格背景色

<div class="category-table">

<el-table

ref="tableRef"

class="common-table"

height="100%"

:row-style="{ height: rowHeight + 'px' }"

:header-row-style="{

background: `url(${tableHeader}) center no-repeat !important`,

backgroundSize: `100% 100% !important`,

}"

style="width: 100%; height: 100%; background-color: transparent"

>

</el-table>

</div>

动态设置行高,在获取到数据以后,记得加一个$nextTick(),不然会报错

javascript 复制代码
// 在获取到表格数据后,判断数据长度大于0后调用
this.$nextTick(() => {
   this.initRowHeight();
});

// 设置行高
    initRowHeight() {
      let tableHeight =
        Math.round(this.$refs["tableRef"].$el.offsetHeight) -
        Math.round(this.$refs["tableRef"].$el.childNodes[1].offsetHeight);
      this.rowHeight = Math.floor(tableHeight / 10); // 返回小于等于最终结果的最大整数
      setTimeout(() => {
        if (this.$refs.tableRef) {
          this.$refs.tableRef.doLayout();
        }
      }, 1000);
    },
2.写在有scoped 的style标签内
css 复制代码
/* 显示滚动条 */
.category-table ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow-y: scroll;
}
/* 设置表格的滚动条宽度 */
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(200, 209, 217, 0.3);
  background-color: rgba(76, 77, 77, 0.1);
}
3.公共的scss样式文件内,没有公共样式文件的话可以放在没有scoped的style标签内,有的话要保证在main.js里引入了
css 复制代码
/* el-table表格组件样式 */
.common-table {

    /* 表格加载中的背景 */
    .el-loading-mask {
        background-color: transparent;
    }

    /** 设置表格暂无数据样式 */
    .el-table__empty-block {
        background-color: transparent;
        color: #a8bfd5;
        letter-spacing: 2px;
    }

    /** 修改表头多选样式 */
    .el-checkbox__inner {
        background-color: transparent;
    }

    .el-checkbox__inner:hover {
        border: 1px solid #6d90ae;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #1173be;
    }

    /* 设置表头样式 */
    &.el-table .el-table__header-wrapper th {
        color: #85b4e6;
        font-weight: normal;
        font-size: var(--font-size-base);
        letter-spacing: 2px;
        background-color: transparent !important;
        background: url("/images/imagine/table-header.png") center no-repeat;
        background-size: 100% 100%;
        border-bottom: 1px solid #0b4f85;
        box-sizing: border-box;
    }

    /** 设置表格的行背景色 */
    .el-table__row {
        background: url("/images/imagine/table-row1.png") center no-repeat;
        background-size: 100% 100%;
    }

    /** 去掉每一行的底边border */
    &.el-table td.el-table__cell {
        color: #aec4da;
        border-bottom: 1px solid #0b4f85;
        font-size: var(--font-size-base);
        letter-spacing: 2px;
    }

    /* 修改表格上侧和左侧的border */
    &.el-table--border,
    &.el-table--group,
    /* 修改表格右侧和底侧的border */
    &.el-table--border:after,
    &.el-table--group:after,
    &.el-table:before {
        border-color: transparent;
    }

    /* 删除表格右侧的border */
    &.el-table--border::after {
        width: 0;
    }

    /** 设置表格左侧第一列的边 */
    &.el-table td.el-table__cell:first-child {
        border-left: 1px solid #0b4f85;
    }

    /** 去掉表格的底边border */
    &.el-table::before {
        height: 0;
    }

    /** 去掉表格头部的border */
    &.el-table--border {
        border: none;
    }

    /** 表格内部每一列右侧border */
    &.el-table--border .el-table__cell {
        border-right: 1px solid #0b4f85;
    }

    /** 表格行的鼠标滑过样式 */
    &.el-table tbody tr:hover>td {
        background: url("/images/imagine/table-row2.png") center no-repeat !important;
        background-size: 100% 100% !important;
    }

    /* 去掉表格滚动条那一列的border */
    &.el-table--border th.el-table__cell.gutter:last-of-type {
        border-bottom-width: 0;
    }
}
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js