ant-design-vue没找到滚动条设置，有什么替代方案吗？

Question

编写了一个左侧菜单，展开后过长和右侧内容区域不协调，没找到滚动条相关的设置。请问大家有什么好方案吗？

Answer 1

Ant Design Vue 是一款基于 Vue 的 UI 组件库，没有提供滚动条组件，但是你可以使用第三方库或者直接使用 CSS 来实现滚动条的设置。

一个常用的第三方库是 "vue-perfect-scrollbar"，它提供了一个高度可定制的滚动条组件，并且兼容 Ant Design Vue。

如果你想使用 CSS 来实现，可以参考以下代码：

.scrollbar {
  overflow: auto;
  height: 200px;
  width: 100%;
}

.scrollbar::-webkit-scrollbar {
  width: 8px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 10px;
}

Answer 2

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 请看👉 ：ant-design-vue组件按需引入及报错解决
• 除此之外, 这篇博客: 运用ant-design-vue组件库，且在项目中遇到的一些问题中的 当你遇到这样的bug时，可能出现了这样的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  vue.runtime.esm.js?0261:619 [Vue warn]: Error in render: “TypeError:
  Cannot read property ‘0’ of undefined”

  出现这个错误的原因其实是Vue在拿到数据之前就渲染了dom，那么在你的html结构中加上v-if，某个数据的长度，如：

  v-if="dataList.length>0
  

  “ReferenceError: h is not defined”

  原因：在用到colums，没放到data里定义，会报错

  本次就写这么多，下次继续更新，写的不好还望多多指教，谢谢！

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^