Vue3 Element-Plus 修改 el-table checkbox 的 border 颜色

介绍

Vue3 Element-Plus 是一个基于 Vue3 的组件库，提供了丰富的 UI 组件，其中 el-table 是常用的数据展示组件之一。在 el-table 中，我们可以通过使用 checkbox 来实现批量操作。

然而，默认情况下，el-table checkbox 的边框颜色可能无法满足我们的需求。本篇博客将介绍如何通过修改样式来更改 el-table checkbox 的 border 颜色。

步骤

1. 创建一个新的 SCSS 文件

首先，我们需要创建一个新的 SCSS 文件，用于存放自定义样式。

在你的项目中找到一个合适的位置，比如 src/assets/styles/，然后创建一个新的 SCSS 文件，比如 table.scss。

2. 添加样式代码

打开 table.scss 文件，并添加以下代码：

.el-table__header th.is-checked .el-checkbox__inner,
.el-table__body td.is-checked .el-checkbox__inner {
  border-color: #ff0000; // 这里可以修改为你希望的颜色
}

这段代码通过修改 .el-table__header th.is-checked .el-checkbox__inner 和 .el-table__body td.is-checked .el-checkbox__inner 的 border-color 属性来改变 el-table checkbox 的边框颜色。

3. 导入样式文件

在你的项目入口文件（比如 main.js）中，加入以下代码来导入样式文件：

import '@/assets/styles/table.scss';

这样，样式文件就会被正确地导入到项目中。

4. 编译并查看效果

最后，重新编译你的项目，并在具体使用 el-table 的页面中查看效果。你会发现 el-table checkbox 的边框颜色已经成功修改为你所设定的颜色。

总结

通过上述步骤，我们成功地修改了 Vue3 Element-Plus 的 el-table checkbox 的 border 颜色。这种方式简单且灵活，让我们能够根据需求自定义组件的样式。

希望本篇博客能对你在 Vue3 Element-Plus 开发中修改 el-table checkbox 样式有所帮助。如果你有任何疑问或建议，请在评论区留言。感谢阅读！

参考链接：Vue3 Element-Plus 官方文档