el-select封装组件多选,选择全部与选其他选项互斥
子组件中页面
<!-- el-select 多选 -->
<template>
<el-select class="c-select" v-model="selectValue" :placeholder="placeholder" :multiple="multiple" :disabled="disabled"
:size="size" :clearable="clearable" :filterable="filterable" :remote="remote" :remote-method="remoteMethod"
:loading="loading" @change="handleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
</el-option>
</el-select>
</template>
<script>
export default {
name: '',
data () {
return {
selectValue: '',
loading: false
}
},
props: {
value: {
type: Array,
default: () => []
},
placeholder: {
type: String,
default: '请选择'
},
clearable: {
type: Boolean,
default: true
},
multiple: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: false
},
remote: {
type: Boolean,
default: false
},
options: {
type: Array,
default: () => []
},
remoteMethod: {
type: Function,
default: () => { }
},
size: {
type: String,
default: ''
},
styles: {
type: Object,
default: () => { }
}
},
mounted () {
this.selectValue = this.value
},
methods: {
handleChange(value) {
let index = value.indexOf('-1')
if (value.length > 1) {
if (index>1) {
value = ['-1']
} else if (index >-1 ) {
value.splice(index,1)
}
}
this.selectValue = value
this.$emit('input', value)
this.$emit('change',value)
}
}
}
</script>
<style lang="scss" scoped>
.c-select{
&::v-deep .el-select__tags{
overflow-x: scroll;
flex-wrap: nowrap;
&::-webkit-scrollbar {
display: none;
}
}
}
</style>
父组件中使用
import Selects from "@/components/selects"
<Cselects :multiple="true" v-model="query.companyType" :options="companyTypeList" placeholder="请选择">
</Cselects>
export default {
name: '',
data () {
return {
companyTypeList: [],
query:{
companyType: []
}
}
},