el-select+vue使用

最新推荐文章于 2025-08-06 21:21:40 发布

weixin_30262255

最新推荐文章于 2025-08-06 21:21:40 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/zhaotq/p/9308882.html

本文介绍如何使用el-select组件为用户提供友好的下拉选择体验。包括如何设置默认选项、如何监听选项变化并根据所选值加载不同数据等内容。

包含：

el-select添加默认选项
el-select选项被选中时对应显示相应数据

html部分：

<el-select class="item-choose" v-model="value" size="small">
    <el-option
        v-for="(item,index) in options"
        :key="index"
        :label="item.label"
        :value="item.value"
></el-option>
</el-select>

js部分：

import {getNewLists, choiceOthers} from '../../../api/api'
export default {
        data() {
            return {
                options: [{
                    value: '1',
                    label: '苹果'
                }, {
                    value: '2',
                    label: '香蕉'
                }, {
                    value: '3',
                    label: '山竹'
                }],
                value: '1'
            }
        },
        methods:{
            initAllList(){
                getNewLists()
                    .then((response) => {
                        this.$emit('newsList',response.data);
                    })
            },
            getlists(val){
                console.log(val)
                if(val == 1){
                    getNewLists()
                        .then((response) => {
                            this.$emit('newsList',response.data);
                        })
                }
                else if(val == 2){
                    choiceOthers('zhiyou')
                        .then((response) => {
                            this.$emit('newsList',response.data);
                        })
                }
                else{
                    choiceOthers('others')
                        .then((response) => {
                            this.$emit('newsList',response.data);
                        })
                }
            },
        },
        watch: {
            "value": function (value) {
                this.getlists(value)
            },
        },
        created(){
            this.initAllList()
        },
}

  initAllList()用来初始化页面第一次载入时的data数据（我这里的数据是由子组件传递到父组件的）。el-select选项被选中时对应显示相应数据是由 watch监测value值的变化，并请求相应的后端接口来进行处理。
　 有更好的写法欢迎评论区指点~

转载于:https://www.cnblogs.com/zhaotq/p/9308882.html