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>

如何为iview ui多重选择添加限制？

1 个答案: