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

向select输入添加一些填充，如下所示：

.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

这是一个有趣的问题。

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

引擎盖下的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>

代码非常简单，并且我已经添加了一些注释，因此根据您的需求进行调整并不难：将其移至mixin，添加对多个选择的支持等。

Popper在SO代码段中工作很奇怪，所以这里工作的是jsfiddle。

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

2 个答案: