el-select封装组件多选，选择全部与选其他选项互斥

最新推荐文章于 2024-02-01 14:20:42 发布

@草莓小布丁

最新推荐文章于 2024-02-01 14:20:42 发布

阅读量652

点赞数 8

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_52441253/article/details/135354965

版权

本文介绍了如何在Vue的el-select组件中实现多选功能，并确保全选与选择其他选项互斥。通过示例展示了组件的使用方法和数据绑定，以及自定义处理值的变化逻辑。

摘要由CSDN通过智能技术生成

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: []
            }
        }
    },