vuetreeSelect选择器样式修改

//tree
.treeSelect {
  width: 212px;
  border-radius: 0;
  height: 50px;
}

::v-deep .vue-treeselect__control {
  height: 100%;
  border: 1px solid rgba(2, 189, 253, 0.35);
}
::v-deep .vue-treeselect__placeholder {
  color: #606266;
}
//foucs时的placeholder
::v-deep.vue-treeselect--focus .vue-treeselect__input{
color: #606266 !important;
}
//foucs时有值的input
::v-deep.vue-treeselect--has-value .vue-treeselect__single-value{
color: #606266 !important;
}
::v-deep .vue-treeselect__menu {
  background: #024b8a;
  // border: none;
  border: rgba(8, 160, 255, 0.827) 1px solid;
}
::v-deep.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused)
  .vue-treeselect__control:hover {
  border-color:  rgba(8, 160, 255, 0.827);
}
// ::v-deep .vue-treeselect__list:hover > .vue-treeselect__list-item {
//   background: #202a60;
// }
//选中的
// ::v-deep .vue-treeselect__single-value {
//   color: #fff;
//   line-height: 47px;
//   font-size: 20px;
// }
//input箭头
::v-deep .vue-treeselect__control-arrow-container .vue-treeselect__control-arrow {
  color: #C0C4CC !important;
}
//清空icon
::v-deep .vue-treeselect__x-container .vue-treeselect__x{
  color: #C0C4CC !important;

}
//hover
::v-deep .vue-treeselect__option--highlight{
background-color: #4a8bec !important;
}
//选中的menu
::v-deep .vue-treeselect__option--selected{
background: none;
}
// /deep/ .vue-treeselect__option--selected
// :hover{
// background: #202a60;
// }
// /deep/ .vue-treeselect__option--selected
// :hover{
// background: #202a60;
// }
// /deep/ .vue-treeselect__option--selected
// :hover .vue-treeselect__option-arrow-placeholder{
// background: #202a60;
// }
//menu文字
::v-deep .vue-treeselect__label{
color: #fff;
}
//menu-icon
::v-deep .vue-treeselect__option-arrow-container .vue-treeselect__option-arrow{
  color: #2aebff !important;
}

接下来看效果：

vuetreeSelect插件不会用的看我另一篇博客 点击这里