输入框高度设置问题不知道怎解决

问题遇到的现象和发生背景

感觉这个机构名称宽度和别的有点不同，自己就尝试改了一下看看，
通过F12看了一下属于哪个元素

然后在

.vue-treeselect,.vue-treeselect__control{
    width: 220px !important;
    height: 32px !important;
  }

设置为32，之前那个框应该是36，
设置之后还是不行，索性把所有都设置了

但是还是不行，
所以问题到底出在哪里

问题相关代码，请勿粘贴截图

代码

<el-form-item label="机构名称" prop="deptId" >
            <treeselect v-model="queryParams.deptId"
                        :options="deptOptions"
                        :show-count="true"
                        placeholder="请选择归属机构"
                        @onChange="handleNodeClick"/>
          </el-form-item>

<style lang="scss" scoped>
// 左侧部门树
.tree-container {
  max-height: 535px;
  overflow-y: auto;
  // 滚动条-FireFox
  scrollbar-width: thin;
}
.w-e-toolbar{
  z-index: 1!important;
}
// 滚动条-除FireFox外
.tree-container::-webkit-scrollbar {
  width: 8px;
}
.tree-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}
</style>
<style lang="scss" scoped>
  // 关联用户对话框
  .associated-user-dialog {
    ::v-deep .el-dialog {
      min-width: 480px;
      min-height: 580px;
      width: 70vw;
      height: 90vh;
      margin-top: 5vh !important;
      overflow: auto;
    }
  }
  .vue-treeselect,.vue-treeselect__control{
    width: 220px !important;
    height: 32px !important;
  }

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

看官网暴露的属性
应该有size='mini'

影响高度的不仅仅有height 还有padding和border 建议检查下盒子结构和内部的子标签样式

如果对你有帮助的话，麻烦给个采纳啊，非常感谢