Блог

Главная - Вопросы по программированию - Element.io множественный выбор автоматической ширины

Element.io множественный выбор автоматической ширины

#css #vuejs2 #element-io

Вопрос:

Я хотел бы использовать селектор множественного выбора, но хотел бы иметь гибкую ширину, т. Е. чтобы ее ширина увеличивалась в соответствии с выбранными элементами.

Вот код без гибкого поведения, я перепробовал много вещей, но не смог добиться того, чего хочу:

 var Main = {
    data() {
      return {
        options: [{
          value: 'Option1',
          label: 'Option1'
        }, {
          value: 'Option2',
          label: 'Option2'
        }, {
          value: 'Option3',
          label: 'Option3'
        }, {
          value: 'Option4',
          label: 'Option4'
        }, {
          value: 'Option5',
          label: 'Option5'
        }, {
          value: 'Option6',
          label: 'Option6'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app') 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/index.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" integrity="sha512-oKuj7gKXGxOZuCSvOPZE1seWosmP4iy608AyAH4hPnGD6tPX4325S wo6MJQz L3Hq4tK3e0RMfu TDFUZFrgA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="app">
  <template>
    <el-select v-model="value" multiple placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </template>
</div>
Метки: