我的代码有什么问题吗？在测试自定义下拉菜单的底部，没有出现效果 #16472

startjava · 2024-04-11T09:16:13Z

startjava
Apr 11, 2024

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .option-input {
                width: 100%;
                margin-bottom: 8px;
            }
        </style>
        <script type="module" src="8_自定义下拉菜单的底部.js"></script>
    </head>
    <body>
        <div id="mydiv1">
            <el-select v-model="value" placeholder="Select" style="width: 240px">
                <el-option
                        v-for="item in cities"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />
                <template #footer>
                    <el-button v-if="!isAdding" text bg size="small" @click="onAddOption">
                        Add an option
                    </el-button>
                    <template v-else>
                        <el-input
                                v-model="optionName"
                                class="option-input"
                                placeholder="input option name"
                                size="small"
                        ></el-input>
                        <el-button type="primary" size="small" @click="onConfirm"> confirm</el-button>
                        <el-button size="small" @click="clear">cancel</el-button>
                    </template>
                </template>
            </el-select>
        </div>
    </body>
</html>

import {createApp, ref, watch} from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp({
    setup() {
        const isAdding = ref(false)
        const value = ref([])
        const optionName = ref('')
        const cities = ref([
            {
                value: 'Beijing',
                label: 'Beijing',
            },
            {
                value: 'Shanghai',
                label: 'Shanghai',
            },
            {
                value: 'Nanjing',
                label: 'Nanjing',
            },
            {
                value: 'Chengdu',
                label: 'Chengdu',
            },
            {
                value: 'Shenzhen',
                label: 'Shenzhen',
            },
            {
                value: 'Guangzhou',
                label: 'Guangzhou',
            },
        ])

        const onAddOption = () => {
            isAdding.value = true
        }

        const onConfirm = () => {
            if (optionName.value) {
                cities.value.push({
                    label: optionName.value,
                    value: optionName.value,
                })
                clear()
            }
        }

        const clear = () => {
            optionName.value = ''
            isAdding.value = false
        }

        return {value, cities, isAdding}
    }
});
app.use(ElementPlus)
app.mount("#mydiv1");

https://element-plus.org/zh-CN/component/select.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%9A%84%E5%BA%95%E9%83%A8

按照这个DEMO做的，为什么不出效果？

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

我的代码有什么问题吗？在测试自定义下拉菜单的底部，没有出现效果 #16472

{{title}}

Replies: 0 comments

Select a reply

我的代码有什么问题吗？在测试自定义下拉菜单的底部，没有出现效果 #16472

startjava Apr 11, 2024

Replies: 0 comments

startjava
Apr 11, 2024