<template>
    <div>
        <el-cascader v-model="selectedValue"
                     :options="areaOptions"
                     placeholder="請選擇學區">
            <template #default="{ node, data }">
                <!-- 插入 Button 的 Slot -->
                <div v-if="node.level === 1" style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
                    <span>{{ data.label }}</span>
                    <el-button type="primary" size="small" @click="handleClick(data.label)">
                        點擊操作
                    </el-button>
                </div>
            </template>
        </el-cascader>
    </div>
</template>

<script setup>
    import { ref } from "vue";

    // 学区选项
    const areaOptions = [
        { value: "taipei", label: "台北學區" },
        { value: "taichung", label: "台中學區" },
        { value: "south", label: "南台學區" },
    ];

    // 绑定选中的值
    const selectedValue = ref([]);

    // 按钮点击操作
    const handleClick = (area) => {
        alert(`您點擊了：${area}`);
    };
</script>

<style scoped>
    .el-cascader-menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>