el-select+vue使用

Posted 2020-12-04 zhaotq

包含：

• 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值的变化，并请求相应的后端接口来进行处理。
　 有更好的写法欢迎评论区指点~