vue、element-ui 下拉框全选

vue、element-ui 下拉框全选

1. 选全选时，勾选所有项，全选某一项时，取消选择当前项和取消选择全选
   

<template>
    <el-select
        placeholder="请选择部署单元名称"
        filterable
        multiple
        collapse-tags
        value-key="key"
        v-model="service">
        <li class="el-select-dropdown__item" :class="{ selected: serviceSelectedAll }" @click="onServiceSelectedAll">
            <span>全选</span>
        </li>
        <el-option
            :label="service.name"
            :value="service.code"
            :key="service.code"
            v-for="service in serviceList">
        </el-option>
    </el-select>
</template>
<script>
export default {
    data() {
        return {
            serviceList: [],
            service: []
        }
    },
    computed: {
        // 全选的勾选状态 true、false
        serviceSelectedAll() {
            return this.chosenServiceWrapList.length === this.serviceList.length
        }
    },
    methods: {
        onServiceSelectedAll() {
            if (this.serviceSelectedAll) {
                // 取消全选
                this.service = []
            } else {
                this.service = this.serviceList.map(item => item.code )
            }
        },
    }
}
</script>