zoukankan      html  css  js  c++  java
  • el-select+vue使用

    包含:

    • 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值的变化,并请求相应的后端接口来进行处理。
      有更好的写法欢迎评论区指点~
     
  • 相关阅读:
    Git使用及关联远程仓库
    Ceres Solver
    Halcon手眼标定
    Halcon 3D定位方法
    机器学习-数学基础
    Halcon匹配方法
    手眼标定
    C动态内存分配
    Halcon Calibration Assistant
    Visualization
  • 原文地址:https://www.cnblogs.com/zhaotq/p/9308882.html
Copyright © 2011-2022 走看看