2

我正在尝试向 iView ui 添加限制Multiple select。这是代码

<Select
     v-model="data.category"
     :multiple="true"
     filterable
     remote
     :remote-method="remoteMethod2"
     :loading="loading2">
     <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
</Select>

我想添加这样的东西max="3"来限制选定的项目

在 api 文档中找不到任何内容。

4

1 回答 1

1

没有具有该功能的属性，但我们可以通过观察model包含所选项目的我们的长度来自己完成，如果它等于max数据对象属性中的固定值，我们将disabled属性状态更改为true，如果从所选项目中删除一个项目我们还可以启用选项下拉菜单，请查看以下解释自身的示例：

var Main = {
  data() {
    return {
    disable:false,
      max: 2,
      cityList: [{
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model10: []
    }
  },
  watch: {
    model10(val) {
      if (val.length == this.max) this.disable=true
      else this.disable=false
    },
   
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <i-select v-model="model10" multiple style="width:260px">
    <i-option :disabled="disable" v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
  </i-select>
</div>

于 2018-10-19T22:20:29.237 回答