Vue3 + TypeScript + Element Plus + el-table 表格滚动条的使用说明

一、显示浏览器的滚动条

显示效果:

一直显示滚动条

模板设置特点:

使用 div 包裹 el-table

html 复制代码
<template>
  <div>
    <el-table
      ......
      style="width: 100%; height: 100%">
      ......
    </el-table>
  </div>
</template>

二、显示表格内置的滚动条

显示效果:

光标没有移动到表格上,不会显示滚动条

光标移动到表格上,才会显示滚动条

模板设置特点:

不使用 div 包裹 el-table

html 复制代码
<template>
  <el-table
    ......
    style="width: 100%; height: 100%">
    ......
  </el-table>
</template>

细心观察,会发现去掉 div 包裹 el-table 后,表格的行背景颜色失效了。

因为这里表格的行背景颜色是通过 v-bind() 实现的,原理是 v-bind() 转换为 CSS 变量(Custom Properties),并在组件根元素动态注入,这里的根元素就是 div

html 复制代码
<script setup lang="ts" name="ReagentTable">
......

// 过期提醒颜色,CSS 变量,通过 v-bind() 绑定给元素样式
// const cssColorVar = ref("#fdd4e5");
// const cssColorObj = ref({ color: "skyblue" });
const expirationReminderColor = useSystemOptionKeyVal("ResourcesExpirationReminderColor");

......
</script>

<template>
  <el-table
    ......
    style="width: 100%; height: 100%">
    ......
  </el-table>
</template>

<style scoped lang="scss">
// 过期颜色
:deep .el-table .expire-row {
  // 基础变量,推荐使用双引号包裹
  // background-color: v-bind("cssColorVar");
  // 基础变量,可以省略双引号
  // background-color: v-bind(cssColorVar);
  // 对象变量,必须使用双引号包裹
  // background-color: v-bind("cssColorObj.color");
  // 对象变量,必须使用双引号包裹,属性 systemOptionValue 为 Ref,需 .value 取值
  background-color: v-bind("expirationReminderColor.systemOptionValue.value");
}
</style>

去掉 div 包裹 el-table 后,该组件就没有根元素了,【v-bind() 转换为 CSS 变量到根元素】,这里转换不了,导致行背景颜色失效,background-color: v-bind("expirationReminderColor.systemOptionValue.value");获取不到CSS样式变量

三、最终解决方案(显示表格内置的滚动条+行背景颜色)

1、保持原来的结构不变,始终保留 div 包裹 el-table,以确保 v-bind() 正常工作。

2、通过 CSS 样式设置,屏蔽浏览器的滚动条,显示表格内置的滚动条。

1)、div 添加类名 <div class="table-container">

2)、设置 div 样式

html 复制代码
.table-container {
  height: 100%; /* 只要设置容器高度为100%,就可以隐藏浏览器的滚动条 */
}

3)确保el-table 的高度也为 100%

优化使用属性设置:height="100%"

也可使用样式设置:style="width: 100%; height: 100%"

html 复制代码
<script setup lang="ts" name="ReagentTable">
......

// 过期提醒颜色,CSS 变量,通过 v-bind() 绑定给元素样式
// const cssColorVar = ref("#fdd4e5");
// const cssColorObj = ref({ color: "skyblue" });
const expirationReminderColor = useSystemOptionKeyVal("ResourcesExpirationReminderColor");

......
</script>

<template>
  <div>
    <el-table
      ......
      style="width: 100%; height: 100%">
      ......
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.table-container {
  height: 100%; /* 只要设置容器高度为100%,就可以隐藏浏览器的滚动条 */
}

// 过期颜色
:deep .el-table .expire-row {
  // 基础变量,推荐使用双引号包裹
  // background-color: v-bind("cssColorVar");
  // 基础变量,可以省略双引号
  // background-color: v-bind(cssColorVar);
  // 对象变量,必须使用双引号包裹
  // background-color: v-bind("cssColorObj.color");
  // 对象变量,必须使用双引号包裹,属性 systemOptionValue 为 Ref,需 .value 取值
  background-color: v-bind("expirationReminderColor.systemOptionValue.value");
}
</style>

显示效果:

光标没有移动到表格上,不会显示滚动条

光标移动到表格上,才会显示滚动条

相关推荐
DoraBigHead8 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode14 分钟前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端