Javascript 使用元素ui在选项值较大时调整选择框

使用元素ui在选项值较大时调整选择框

如何做到这一点，请指导

选择后不应剪切字符串

<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

@导入url//unpkg.com/element-ui@2.7.2/lib/theme chalk/index.css；

---

在选择输入中添加一些填充，如下所示：

.el-select>.el-input {
      display: block;
      padding-right: 2px;
}

var Main={ 资料{ 返回{ 选项：[{ 值：“OptionFirstWithBigCharacter”， 标签：“OptionFirstWithBigCharacter” }, { 值：'Option2'， 标签：“选项2” }, { 值：'Option3'， 标签：“选项3” }, { 值：'Option4'， 标签：“选项4” }, { 值：'Option5'， 标签：“选项5” }], 价值： } } } 变量向量=Vue.extendMain 新Ctor.$mount'app' @导入url//unpkg.com/element-ui@2.7.2/lib/theme chalk/index.css； .el选择>.el输入{ 显示：块； 右边填充：8px； }

---

这是一个有趣的问题

显然，解决方案是计算选定值的文本宽度，并将“选择”调整为该宽度，但这是一项棘手的任务

在引擎盖下，el select使用元素来显示选定的项目，并且不能根据其值调整其宽度，因此我们需要使用另一个可以这样做的元素。例如，这是一个很好的选择

以下是我得到的：

Vue.config.productionTip=false； var Main={ 资料{ 返回{ 选项：[{ 值：“OptionFirstWithBigCharacter”， 标签：“OptionFirstWithBigCharacter” }, { 值：'Option2'， 标签：“选项2” }, { 值：'Option3'， 标签：“选项3” }, { 值：'Option4'， 标签：“选项4” }, { 值：'Option5'， 标签：“选项5” }], 价值： } }, 安装{ //传递true以使输入使用其初始宽度作为最小宽度 这是我的影子； }, 方法：{ _获取元素{ //获取输入及其阴影范围的helper方法 常量输入=此。$refs.resizeable。$el.querySelector'.el-input____内部'； 常量span=输入。上一个同级；； 返回{input，span}； }, _addShadowuseMinWidth=false{ //此方法将阴影范围添加到输入 //我们将使用这个跨度来计算文本宽度 const{input}=this.\u getElements； const span=document.createElement'span'； 添加'resizeable-shadow'； input.parentNode.insertBeforespan，输入； //从输入中复制字体、填充和边框样式 const css=input.computedStyleMap； span.style.font=css.get'font'； span.style.padding=css.get'padding'； span.style.border=css.get'border'； 如果使用最小宽度{ span.style.minWidth=`${input.getBoundingClientRect.width}px`； } }, _调整大小{ 这个。$nextTick=>{ const{input，span}=this.\u getElements； span.textContent=input.value； input.style.width=`${span.getBoundingClientRect.width}px`； }; }, }, } 变量向量=Vue.extendMain 新Ctor.$mount'app' @导入url//unpkg.com/element-ui@2.7.2/lib/theme chalk/index.css； span.可调整大小的阴影{ 显示：内联块； 框大小：边框框； 位置：绝对位置； 左：-99999像素； 顶部：-99999像素； }

---

它应该根据内容调整宽度。如果选择选项2，它应该自动调整宽度