1. 單選框? 與多選框

<template><div class="demo-page" style="padding: 40px; max-width: 1200px; margin: 0 auto; font-family: 'Microsoft YaHei', Arial, sans-serif;"><h1 style="color: #1890ff; text-align: center; margin-bottom: 10px;">📊 下拉框功能演示</h1><p style="text-align: center; color: #666; margin-bottom: 40px;">模擬從后端加載數據 | Vue 2 + ant-design-vue</p><a-spin :spinning="loading" tip="加載數據中..." style="display: block; margin-bottom: 30px;"><div style="background: #f8f9fa; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;gap: 24px;align-items: flex-start;"><!-- 單選：選擇省份 --><div style="flex: 1; min-width: 280px;"><label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">選擇省份：</label><a-selectv-model="selectedProvince"placeholder="請選擇一個省份"style="width: 100%;"@change="handleProvinceChange"><a-select-option v-for="p in provinces" :key="p.value" :value="p.value">{{ p.label }}</a-select-option></a-select></div><!-- 多選：選擇城市 --><div style="flex: 1; min-width: 280px;"><label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">選擇城市（多選）：</label><a-selectmode="multiple"v-model="selectedCities"placeholder="請選擇你喜歡的城市"style="width: 100%;":disabled="loading"><a-select-option v-for="c in cities" :key="c.value" :value="c.value">{{ c.label }}</a-select-option></a-select></div></div></a-spin><!-- 顯示結果 --><div style="margin-top: 30px; padding: 20px; background: #e6f7ff; border-radius: 8px; border-left: 4px solid #1890ff;"><h3>🎯 當前選擇結果：</h3><p><strong>選中的省份：</strong> {{ provinceText || '未選擇' }}</p><p><strong>選中的城市：</strong> {{ selectedCities.length ? selectedCities.map(v => cityMap[v]).join(', ') : '未選擇' }}</p></div></div>
</template><script>
export default {name: 'Home',data() {return {loading: true,selectedProvince: undefined,selectedCities: [],provinces: [{ value: 'zhejiang', label: '浙江省' },{ value: 'jiangsu', label: '江蘇省' },{ value: 'guangdong', label: '廣東省' },{ value: 'sichuan', label: '四川省' },{ value: 'shandong', label: '山東省' }],cities: [{ value: 'hangzhou', label: '杭州' },{ value: 'ningbo', label: '寧波' },{ value: 'wenzhou', label: '溫州' },{ value: 'shaoxing', label: '紹興' },{ value: 'nanjing', label: '南京' },{ value: 'suzhou', label: '蘇州' },{ value: 'wuxi', label: '無錫' },{ value: 'guangzhou', label: '廣州' },{ value: 'shenzhen', label: '深圳' },{ value: 'chengdu', label: '成都' }]}},computed: {provinceText() {const p = this.provinces.find(item => item.value === this.selectedProvince)return p ? p.label : ''},cityMap() {const map = {}this.cities.forEach(c => { map[c.value] = c.label })return map}},methods: {handleProvinceChange(value) {console.log('選擇了省份:', value)}},created() {setTimeout(() => {this.loading = false}, 1200)}
}
</script><style scoped>
/* ? 使用 :deep() 替代 /deep/，現代寫法 */
:deep(.ant-select-arrow) {color: black !important;opacity: 1 !important;
}:deep(.ant-select-arrow::before) {content: '>' !important;color: black !important;font-weight: 600;font-size: 14px;transform: rotate(90deg);transition: transform 0.3s;
}:deep(.ant-select-selection:hover .ant-select-arrow::before) {color: #1890ff !important; /* 懸停變藍色，專業 */
}:deep(.ant-select-open .ant-select-arrow::before) {transform: rotate(-90deg) !important;
}/* 美化多選標簽 */
:deep(.ant-select-selection__choice) {background-color: #1890ff !important;border-color: #1890ff !important;height: 24px;line-height: 22px;
}:deep(.ant-select-selection__choice__content) {color: white !important;
}<style scoped>
/* 設置下拉框輸入框背景為白灰色 */
:deep(.ant-select-selection),
:deep(.ant-select-selection--multiple) {background-color: #f0f0f0 !important; /* 白灰色背景，可以根據需要調整色值 */
}/* 可選：為懸停和聚焦狀態設置不同的背景顏色 */
:deep(.ant-select-selection:hover),
:deep(.ant-select-selection:focus) {background-color: #e0e0e0 !important; /* 懸停或聚焦時稍微深一點的白灰色 */
}
</style>

2. 下拉框純靜態展示

<template><div class="demo-page" style="padding: 40px; max-width: 1200px; margin: 0 auto; font-family: 'Microsoft YaHei', Arial, sans-serif;"><h1 style="color: #1890ff; text-align: center; margin-bottom: 10px;">📋 下拉框值展示（點擊展開）</h1><p style="text-align: center; color: #666; margin-bottom: 40px;">點擊展開展示下拉框中的所有可選值 | 靜態展示</p><!-- 🔹 展示所有省份 --><div style="display: flex; justify-content: space-between; margin-bottom: 20px;"><div style="display: flex; align-items: center; gap: 16px; width: 45%;"><span style="font-weight: 500; color: #333;">所有可選省份：</span><a-popover placement="bottomLeft" trigger="click"><template slot="content"><div style="max-height: 200px; overflow-y: auto; padding: 8px; width: 200px;"><div v-for="p in provinces" :key="p.value">{{ p.label }}</div></div></template><a-button type="link">點擊查看</a-button></a-popover></div><!-- 🔹 展示所有城市 --><div style="display: flex; align-items: center; gap: 16px; width: 200px;"><span style="font-weight: 500; color: #333;">所有可選城市：</span><a-popover placement="bottomLeft" trigger="click"><template slot="content"><!-- ? 在這里設置彈出面板的寬度 --><div style="max-height: 150px; overflow-y: auto; padding: 8px; width: 100px;"><div v-for="c in cities" :key="c.value">{{ c.label }}</div></div></template><a-button type="link">點擊查看</a-button></a-popover></div></div></div>
</template><script>
export default {name: 'Home',data() {return {// 模擬數據provinces: [{ value: 'zhejiang', label: '浙江省' },{ value: 'jiangsu', label: '江蘇省' },{ value: 'guangdong', label: '廣東省' },{ value: 'sichuan', label: '四川省' },{ value: 'shandong', label: '山東省' }],cities: [{ value: 'hangzhou', label: '杭州' },{ value: 'ningbo', label: '寧波' },{ value: 'wenzhou', label: '溫州' },{ value: 'shaoxing', label: '紹興' },{ value: 'nanjing', label: '南京' },{ value: 'suzhou', label: '蘇州' },{ value: 'wuxi', label: '無錫' },{ value: 'guangzhou', label: '廣州' },{ value: 'shenzhen', label: '深圳' },{ value: 'chengdu', label: '成都' }]}}
}
</script><style scoped>
/* 調整樣式使其更加緊湊 */
.demo-page {max-width: 100%;
}.ant-btn-link {padding: 0;color: #1890ff;text-decoration: underline;
}.ant-btn-link:hover {color: #40a9ff;
}.ant-popover-inner-content {padding: 8px;background-color: #fff;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.ant-popover-inner-content div {padding: 4px 0;
}/* 確保每組元素在同一行顯示 */
.flex-container {display: flex;justify-content: space-between;
}.flex-item {display: flex;align-items: center;gap: 16px;
}.flex-item span {font-weight: 500;color: #333;
}
</style>