el-dialog 里面的 table内容加滚动条

最新推荐文章于 2025-05-07 10:18:39 发布

原创最新推荐文章于 2025-05-07 10:18:39 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了一种在Element UI的EL-Dialog组件中加入滚动条的方法，通过使用EL-Scrollbar组件并设置适当的CSS样式来改善大量历史数据的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求: 因为后台给的历史数据过多,需要给el-dialog 里面的 table内容加滚动条,优化回显效果

    <el-dialog 
     title="历史记录"
     :visible.sync="versionHistoryDialog"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     width="80%"
     center
    >
      <div style="height:600px;" class="scrollbar">
        <el-scrollbar style="height:100%;width:100%;">
            <el-table
              border
              :data="tableData"
              width="100%"
              >
              <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>  
              <el-table-column
                 v-for="item of historyTable"
                 :key="item.label"
                 :prop="item.prop"
                 :label="item.label"
                 :align="item.align"
                 show-overflow-tooltip
                >
              </el-table-column>
            </el-table>
          </el-scrollbar>
      </div>
    </el-dialog>

css部分

<style lang="scss" scoped>
 /deep/ .scrollbar {
white-space: nowrap;  // 强制一行显示（看需要）
.el-scrollbar {       //  决定了再弹框里面的呈现效果
  // display: flex;
  // justify-content: space-around;
  padding: 0 10px;
  }
 /deep/ .el-scrollbar__wrap {  // 必要的
        overflow: scroll; 
        width: 100%;  //隐藏侧边默认滚动条 （达不到效果可以自己试着微调）
        height: 100%;  //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）   
    }
}
</style>