javascript - 如何为 iview ui 多选添加限制？

Question

我正在尝试为 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 文档中找不到任何内容。

Answer 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>