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

Question

使用元素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>

var Main = {
    data() {
      return {
        options: [{
          value: 'OptionFirstWithBigCharacter',
          label: 'OptionFirstWithBigCharacter'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<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>

“OptionFirstWithBigCharacter”应该正确显示

Answer 1

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

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

var Main = {
    data() {
      return {
        options: [{
          value: 'OptionFirstWithBigCharacter',
          label: 'OptionFirstWithBigCharacter'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");
.el-select>.el-input {
      display: block;
      padding-right: 8px;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
<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>

Answer 2

这是一个有趣的问题。

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

在后台el-select 使用<input> 元素来显示选定的项目，而<input> 无法根据其值调整其宽度，因此我们需要使用另一个可以做到这一点的元素。例如，<span> 是不错的选择。

这是我得到的：

Vue.config.productionTip = false;

var Main = {
  data() {
    return {
      options: [{
        value: 'OptionFirstWithBigCharacter',
        label: 'OptionFirstWithBigCharacter'
      }, {
        value: 'Option2',
        label: 'Option2'
      }, {
        value: 'Option3',
        label: 'Option3'
      }, {
        value: 'Option4',
        label: 'Option4'
      }, {
        value: 'Option5',
        label: 'Option5'
      }],
      value: ''
    }
  },
  mounted() {
    // pass true to make input use its initial width as min-width
    this._addShadow();
  },
  methods: {
    _getElements() {
      // helper method to fetch input and its shadow span
      const input = this.$refs.resizeable.$el.querySelector('.el-input__inner');
      const span = input.previousSibling;;
      return { input, span };
    },
    _addShadow(useMinWidth = false) {
      // this method adds shadow span to input
      // we'll use this span to calculate text width
      const { input } = this._getElements();
      const span = document.createElement('span');
      span.classList.add('resizeable-shadow');
      input.parentNode.insertBefore(span, input);

      // copy font, padding and border styles from input
      const css = input.computedStyleMap();
      span.style.font = css.get('font');
      span.style.padding = css.get('padding');
      span.style.border = css.get('border');
      if (useMinWidth) {
        span.style.minWidth = `${input.getBoundingClientRect().width}px`;
      }
    },
    _adjustSize() {
      this.$nextTick(() => {
        const { input, span } = this._getElements();
        span.textContent = input.value;
        input.style.width = `${span.getBoundingClientRect().width}px`;
      });
    },
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css");

span.resizeable-shadow {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: -99999px;
  top: -99999px;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<div id="app">
  <template>
  <el-select v-model="value" placeholder="Select"
             ref="resizeable" @change="_adjustSize">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
</div>

代码非常简单，而且我添加了一些 cmets，因此根据您的需要调整它应该不难：将其移至 mixin、添加对多选的支持等。

Popper 在 SO sn-p 中的工作很奇怪，所以这里是 jsfiddle。