调整tree-select组件高度及横向滚动条

Posted 2023-05-01

参考技术A 1.调整的高度根据input组件sieze='mini'来的，不全适配，按需调整

给与 class="set-treeselect"

 <treeselect

                                v-if="b.inputType == 7"

                                :disable-branch-nodes="true"

                                multiple

                                size="mini"

                                class="set-treeselect"

                                v-model="b.rightOperand"

                                :options="treeList"

                                :normalizer="normalizer"

                                :show-count="true"

                                placeholder="请选择资质"

                                :limit="1"

                                :limitText="count => `+$count`"

                                :clearable="false"

                                :disabled="pageType == 'detail'"

                              />

以下是样式：

// 调整treeselect高度和横向滚动条

.set-treeselect

  width: 240px;

  display: inline-block;

  position: relative;

  top: 10px;

  height: 32px;



::v-deep

  .vue-treeselect__menu

    overflow-x: auto !important;

    width: 250px;

    max-height: 180px !important;

 

  .vue-treeselect__label

    overflow: unset;

    text-overflow: unset;

 

  .vue-treeselect__control

    height: 20px !important;

 

  .vue-treeselect__multi-value-item-container,

  .vue-treeselect--has-value .vue-treeselect__multi-value

    height: 30px;

    line-height: 24px;

    padding: 0;

 

  .vue-treeselect__limit-tip,

  .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value

    .vue-treeselect__input-container

    padding-top: 0;

 

  .vue-treeselect--has-value .vue-treeselect__multi-value

    // margin-bottom: 15px;

 

  .vue-treeselect__placeholder,

  .vue-treeselect__single-value

    height: 28px;

    line-height: 32px;

    font-size: small;

    color: "#CCCFD6";

    // margin-top: 8px;

 

  .vue-treeselect--has-value .vue-treeselect__input

    height: 18px !important;

    line-height: 18px !important;

 

  .vue-treeselect div,

  .vue-treeselect span

    box-sizing: content-box;

    // white-space: nowrap;

    // text-overflow: ellipsis;

 

  // 选中后的溢出隐藏

  .vue-treeselect__multi-value-label

    display: block;

    width: 140px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

 

  .vue-treeselect__value-container

    display: block;

    height: 32px;

 



效果如下：

Ext.tip (Extjs 3.4) 中的强制高度和滚动条

【中文标题】Ext.tip (Extjs 3.4) 中的强制高度和滚动条

【英文标题】：Force height and scrollbar in Ext.tip (Extjs 3.4)

【发布时间】：2015-06-04 01:07:31

【问题描述】：

我有一个 Ext.tip 组件：

var tip = new Ext.Tip(
    header: true,
    collapsible: true,
    width: 350
);

它接收来自查询的结果。有时它会出现小段落，有时会出现大段落。它会根据它们的大小很好地调整大小。不过，我想设置特定提示的高度并在需要时获取滚动条。为此我已经尝试过：

autoScroll: true,
overflow: 'auto',
layout: 'fit',
height: 300,

但它们对我想要的没有影响。检查http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Tip 建议我，据我所知没有办法。 ExtJS 3.4 中有没有办法实现这一点？也许是一个肮脏的黑客解决方案？

可以在此处找到一个简单的最小工作示例：http://jsfiddle.net/Gery/m7xdxwp8/8/

感谢任何提示，

【参考方案1】：

查看源代码后，我看到有几个可以更改的标志，这将允许您的 Ext.Tip 实例可滚动并具有固定高度：

var tip = new Ext.Tip(
    header: true,
    collapsible: true,
    autoHeight: false,
    width: 350,
    height: 50,
    autoScroll: true
);

在这里查看：http://jsfiddle.net/gportela/deojvevn/

如果这有帮助，请告诉我。

【讨论】：

神圣的通心粉，你的回答真是太棒了，谢谢，但由于我不是 extjs 方面的专家，所以这似乎不是一个容易采用的方法，但由于学习的挑战，这很好。我想我可以在 jsfiddle 中获得一个简单的最小工作示例，并将在此处分享它，我会感谢您进一步输入，以便让 Ext.Tip 中的滚动条+高度正常工作。

当然，但也可以考虑将您的应用程序更新到 ExtJS 5 或 6。这些天很少见到有 ExtJS 3 知识的人。

是的，确实如此，但现在从 3.4 移除非常困难，原因有很多，尤其是因为有时间再次重写。

我明白了，当你分享你的小提琴例子时让我知道。如果可能，请使用fiddle.sencha.com。

当我阅读源代码 (docs.sencha.com/extjs/3.4.0/source/Tip.html#Ext-Tip) 时，我注意到 Ext.Tip 扩展了面板，但在原型中设置了 autoHeight: true。更改后只需将 autoScroll 设置为 true 即可。很高兴它有帮助:)

【参考方案2】：

也许你可以试试 style 属性？ 比如：

style:"overflow-y:auto;overflow-x:auto;",

或

style:"overflow-y:scroll;overflow-x:scroll;",

【讨论】：

感谢您的建议，但滚动条并未随之出现。

【参考方案3】：

我不太了解如何在 Ext 3.4 中使用，但我通过 QuickTips 举例说明了它在 Ext 4.2 中的工作原理：https://fiddle.sencha.com/#fiddle/o13

QuickTips 自 2.3 起成为 ExtJS 的一部分

希望对你有帮助

--- 编辑 ---

用 3.4 和 QuickTips 做了一个例子：https://fiddle.sencha.com/#fiddle/u7e

【讨论】：

谢谢你，很好的例子，我将在我的代码中尝试它并告诉你。

在尝试了您的建议后，我无法让 Ext.QuickTip 工作，似乎它的响应方式与 Ext.Tip 的工作方式不同，为什么这么难放Ext.Tip 的滚动条？

查看我的回答中的编辑。我尝试了普通的提示，但最终使用了带有 div 和滚动条的 QuickTips。 Ext 3.4 没有那么多选项来实现特殊结果。在以后的版本中要容易得多。

非常感谢！很好，我想知道是否有可能摆脱这种悬停效果并简单地使用滚动条获得提示？这是真的，但现在很难摆脱 3.4。