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>

显示效果:

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

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

相关推荐
gnip2 分钟前
js模拟重载
前端·javascript
Naturean4 分钟前
Web前端开发基础知识之查漏补缺
前端
curdcv_po6 分钟前
🔥 3D开发,自定义几何体 和 添加纹理
前端
单身汪v11 分钟前
告别混乱:前端时间与时区实用指南
前端·javascript
鹏程十八少37 分钟前
2. Android 深度剖析LeakCanary:从原理到实践的全方位指南
前端
我是ed37 分钟前
# cocos2 场景跳转传参
前端
shenshizhong37 分钟前
鸿蒙南向开发 编写一个简单子系统
前端·harmonyos
MrSkye38 分钟前
🔥深入浅出function.call() - 手写实现竟然只需要这5步!🔥
前端·javascript·面试
ZsTs11940 分钟前
被面试官问 CSS 核心?10 个基础模块笔记(Flex/Sticky/BFC 全拆解 + 陷阱提示)
前端·面试
袋鱼不重41 分钟前
手把手搭建Vue轮子从0到1:5. Ref 模块的实现
前端·vue.js·源码