vue中（el-table）组件怎么通过js【自定义头部以及内容样式】，滚动条滚动功能，显示高亮行等......

 

html：

js：

// 列表第一行样式

cellStyle ({ row, column, rowIndex, columnIndex }) {

    if (rowIndex === 0) { // 指定坐标rowIndex ：行，columnIndex ：列

      return 'background:#334356;color:#FFDE2B' // 除了表头第一行的文字，背景颜色

    } else if (rowIndex <= 3) {

      return 'color:#fff' //前三行的行文字颜色

    } else {

      return ''

    }

 }

       表格文本实现向下滑动的功能，为el-table标签设置固定高度 height=" " 即可实现滚动条滚动功能；在其中 highlight-current-row 是否显示高亮行，当为true时，也就是图标移动点击当前行，显示当前行的选中样式

 

 css：这部分看看就行，都是关于表格的样式的调整。

// 表格

  .el-table {

    background-color: #202d3d;

    font-size: 22px !important;

    margin: 0px 1vw;

  }

  /* 表格内背景颜色 */

  .el-table td, .el-table tr {

    background: #202d3d;

    height: 4.5vw;

    color: #ccc;

    box-shadow: inherit;

  }

  .el-table th {

    background: #3d4e62;

    height: 46px;

    padding: 0;

    font-weight: inherit;

    color: #fff;

  }

  .el-table td,.el-table th.is-leaf {

    border-bottom: 0.013333rem solid #2f3f52;

  }

  .el-table__body tr.current-row > td,

  .el-table--enable-row-hover .el-table__body tr:hover > td {

    background-color: #334356;

    color: #fff;

  }

  // 滚动条的宽度

  .el-table__body-wrapper::-webkit-scrollbar {

    width: 6px;

    height: 100%;

  }

  // 滚动条的滑块

 .el-table__body-wrapper::-webkit-scrollbar-thumb {

    background-color: #47596f;

    border-radius: 3px;

  }

  .el-table--scrollable-y ::-webkit-scrollbar {

    display: block; // 隐藏滚动条

  }

  .el-table__body {

    width: 100% !important;

    margin-bottom: 32px;

  }

  .el-table__body-wrapper {

    background: #202d3d;

  }

  .el-table--border::after {

    background-color: rgba(0, 0, 0, 0);

  }

  .el-table::before{

    background: inherit;

  }

      希望我的愚见能够帮助你哦~，若有不对的地方，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~