Test.vue 1.86 KB
<template>
    <a-select
        v-model:value="value"
        style="width: 120px"
        mode="multiple"
        :maxTagCount="1"
        :options="showedProgressList"
    >
        <template #dropdownRender="{ menuNode: menu }">
            <v-nodes :vnodes="menu"/>
            <a-divider style="margin: 4px 0"/>
            <div
                @mousedown="e => e.preventDefault()"
            >
                <a-button type="link">全选</a-button>
                <a-button type="link">全选</a-button>
            </div>
        </template>
    </a-select>
</template>
<script>
import {PlusOutlined} from '@ant-design/icons-vue'
import {defineComponent, ref} from 'vue'

let index = 0
export default defineComponent({
    components: {
        PlusOutlined,
        VNodes: (_, {attrs}) => {
            return attrs.vnodes
        },
    },

    setup() {
        const items = ref(['jack', 'lucy'])
        const value = ref('lucy')

        const addItem = () => {
            console.log('addItem')
            items.value.push(`New item ${index++}`)
        }

        const showedProgressList = ref([])
        const progressMap = {
            mallcountData: "商场客流",
            floorcountData: "楼层客流",
            zonecountData: "店铺客流",
            gatecountData: "监控点客流",
            mallfaceSta: "商场人脸",
            floorfaceSta: "楼层人脸",
            zonefaceSta: "店铺人脸",
            gatefaceSta: "监控点人脸"
        }
        for (const key in progressMap)
        {
            const value = progressMap[key]

            showedProgressList.value.push(
                {
                    value: key,
                    label: value,
                }
            )
        }
        return {
            items,
            value,
            addItem,
            showedProgressList,
        }
    },
})
</script>