Vue ElementUI select多选互斥

<el-form-item label="运营商">
	<el-select v-model="values" multiple  placeholder="请选择" @change="selectedChange">
      <el-option v-for="item in selects" :key="item.value" :label="item.label" :value="item.value"/>
	</el-select>
</el-form-item>
<script>
export default {
  data() {
    return {
	  selects: [{
				    value: '0',
					label: '不限'
				}, {
					value: '1',
					label: '移动'
				}, {
					value: '2',
					label: '联通'
				}, {
					value: '3',
					label: '电信'
				}],
	 values: []     
    };
  },
  methods: {
		selectedChange(val) {
			if(val[val.length -1] == '0' && this.values.indexOf('1') > -1 ){
			this.values.pop()
					return; 
			}else if(val[val.length -1 ] == '1' && this.values.indexOf('0') > -1){
				this.values.pop()
				return
			}else if(val[val.length -1 ] == '0' && this.values.indexOf('2') > -1){
				this.values.pop()
				return
			}else if(val[val.length -1 ] == '2' && this.values.indexOf('0') > -1){
				this.values.pop()
				return
			}else if(val[val.length -1 ] == '0' && this.values.indexOf('3') > -1){
				this.values.pop()
				return
			}else if(val[val.length -1 ] == '3' && this.values.indexOf('0') > -1){
				this.values.pop()
				return
			}
		}
  }
}
</script>

猜你喜欢

转载自blog.csdn.net/weixin_42679187/article/details/89495699