二改- element-select 实现复选功能之全选互斥

###目的： 实现一个下拉复选框，具有全选功能和清空。要求在input框中可以看到选择的全部选项。 清空偷懒继续使用element自带的clearble属性。

###子组件写法

<template>
    <div>
        <el-select
            :placeholder="placeholder"
            :value="value"
            :size="size"
            clearable
            multiple
            class="idt-multiple-select"
            @input="change($event)"
        >
            <el-option label="全部" :value="''"></el-option>
            <el-option v-for="item in optionsList" :key="item[id]" :label="item[name]" :value="item[valName]"></el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'allSelect',
    data() {
        return {
            currentVal: this.value
        };
    },
    props: {
        name: {
            default: 'dictLabel',
            type: String
        },
        valName: {
            default: 'dictValue',
            type: String
        },
        id: {
            default: 'id',
            type: String
        },
        placeholder: {
            default: '请选择',
            type: String
        },
        size: {
            default: 'small',
            type: String
        },
        filterable: {
            default: false,
            type: Boolean
        },
        value: {
            default: () => {
                return [];
            },
            type: Array
        },
        optionsList: {
            default: () => {
                return [];
            },
            type: Array
        }
    },
    methods: {
        change: function (val) {
            this.currentVal = val;
            this.$emit('input', this.currentVal);
        }
    },
    watch: {
        value(val, oldval) {
            this.currentVal = val;
            let newindex = val.indexOf(''),
                oldindex = oldval.indexOf('');
            if (newindex != -1 && oldindex == -1 && val.length > 1) {
                this.currentVal = [''];
            } else if (newindex != -1 && oldindex != -1 && val.length > 1) {
                this.currentVal.splice(val.indexOf(''), 1);
            }
            this.$emit('input', this.currentVal);
        }
    }
};
</script>

<style lang="scss" scoped>
.el-select {
    width: 100%;
}
/deep/ .el-select__tags {
    height: 28px;
    overflow: auto;
}
/deep/ .el-select__tags::-webkit-scrollbar{
    display: none;
}
</style>

###父组件调用

1. 引用
2. 注册component
3. 代码写法

<all-select v-model="oneArray" :filterable="true" :options-list="optList.someList"></all-select>