pc端项目中，有时候会在页面内部出现滚动条的情况，windows浏览器默认的滚动条是很丑的，尤其是当滚动天出现在页面内部的时候，这时候，为了页面美观，可以考虑优化滚动条样式。
vue Element UI官方文档上并没有放出滚动条相关的示例说明，但是实际上是有这么一个组件的，读者查看element源码，就可以查到这个组件scrollbar，至于为什么不放开这个组件就不得而知了。
效果图如element官网所示：
这里写图片描述
使用：

<el-scrollbar></el-scrollbar>

将会出现滚动的内容放到上述标签内就可以了。
这里要简单的设置一下，将标签的height设为100%，读者查看效果的时候，会出现一个横向的滚动条，如果你不想要横向的滚动条，使用下面css属性设置就可以只显示竖向滚动条。

.el-scrollbar__wrap {
  overflow-x: hidden;
}

示例使用如下：
这里写图片描述

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue