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>

显示效果:

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

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

相关推荐
调皮LE1 分钟前
可放大缩小弹窗组件,基于element-ui的vue2版本
前端
陈随易4 分钟前
10年老前端,分享20+严选技术栈
前端·后端·程序员
我的小月月10 分钟前
基于Canvas实现的网页取色器功能解析
前端
芝士加23 分钟前
还在用html2canvas?介绍一个比它快100倍的截图神器!
前端·javascript·开源
阿虎儿25 分钟前
React 引用(Ref)完全指南
前端·javascript·react.js
Ratten41 分钟前
解决 error when starting dev server TypeError crypto$2.getRandomValues
前端
coding随想44 分钟前
深入浅出DOM3合成事件(Composition Events):如何处理输入法编辑器(IME)的复杂输入流程
前端
六月的雨在掘金44 分钟前
狼人杀法官版,EdgeOne 带你轻松上手狼人杀
前端·后端
Ratten1 小时前
【npm 解决】---- TypeError: crypto.hash is not a function
前端
前端小大白1 小时前
JavaScript 循环三巨头:for vs forEach vs map 终极指南
前端·javascript·面试