el-table滚动条设置及设置滚动条后多出空白列修改

JunJiu0420

已于 2024-06-04 14:53:36 修改

阅读量153

点赞数 2

分类专栏：工作笔记 vue elementui 文章标签： vue.js javascript elementui

于 2024-05-16 10:07:37 首次发布

本文链接：https://blog.csdn.net/JunJiu0420/article/details/138948763

版权

工作笔记同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

elementui

1 篇文章 0 订阅

订阅专栏

运行结果：

代码：


::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
  background: #555;
}

多出空白列截图：

空白列修改：

1、将多出的列隐藏

div ::v-deep th.gutter {
  display: initial;
}

2、给el-table-column设置适当的宽度，直到空白列消失

        <el-table :data="tableData" height="276" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="jiesuan"
            label="项目内容"
            align="center"
            width="125"
          >
          </el-table-column>
          <el-table-column
            prop="shoupiao"
            label="累计金额"
            sortable
            align="center"
             width="100"
          >
          </el-table-column>
        </el-table>