vue中使用el-dialog里面使用的el-select选中无法显示值问题

    场景一问题描述：页面中有个el- dialog，里面有三个el- select，前两个是联动的，第一次打开el- dialog *** 作选中是没有问题的，第二次会出现第二个和第三个选中之后先不显示值，过一会才显示，或者是输入其他input的时候就会立即显示

之前查阅资料有的人遇到的问题是定义v-model时用的是对象，但是里面却没有明确定义；我的这个是有明确定义的，所以这个方法不适用

后来查阅资料，参考：>

在使用的时候，自定义设置了下拉框的背景色 和 hover后的字体颜色和背景颜色

但是 测试过程中 发现 当未选中item的时候，将鼠标移出，字体会恢变成白色 和 背景色融为一体

1：复现场景，打开控制台，找到这一条数据

如图所示

2：查看类名，根据需求修改背景色或者字体颜色

生活就是不断的前进，每天坚持一点点~ 加油

一个三级嵌套就可以搞定

网上的办法大多都是直接在option上写，给option加一个高度，然后overflow: auto，这样会有问题， 因为select本身使用的是element-ui自己的滚动条组件， max-height为274px，一旦option设置高度过大，会出现双重滚动条，而且原生滚动条真的有点丑，其实这里只需要给option加一个height: auto，就可以使用select自带的滚动条，不需要单独再加其他滚动。

发现两个问题

要解决几点

scrollToOption？拿来吧你

很明显，要传入一个option对象，而option的$el属性是一个dom，则表现形式就是一个Vue的实例，我这边直接用querySelector获取一个dom， 传入{ $el: dom }也能用。再然后就是找这个dom，发现当树某一节点被点击时，其class会多一个is-current，那么就可以这样写：

ps: 只针对单选做的，多选还需按照情况改。

一般情况下是前端通过调取后端接口，来获取到数据库的数据，后端哪里会把数据库的数据整理成一般是json形式的数据，前端获取到数据后，写上select标签，用v-for来循环option标签，然后点击下拉框就能看到下拉框中的数据选项了。点击下拉框再去过去数据的话交互不好。还有一种是元数据库的 *** 作，据说是前端直接调用数据库，不过用的不多。

最近项目里需要用到下拉框来动态获取年份，网上找的时候大部分都是js写的，这里记录下用vue来实现。

项目需求：下拉框动态获取年份

项目环境：vue + vue cli +element-ui + select选择器

最终效果：

以上就是关于vue中使用el-dialog里面使用的el-select选中无法显示值问题全部的内容，包括:vue中使用el-dialog里面使用的el-select选中无法显示值问题、vue element-ui select框选中回显、vue element el-select hover等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！