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>

显示效果：

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

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