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值的变化,并请求相应的后端接口来进行处理。
      有更好的写法欢迎评论区指点~
     
  • 相关阅读:
    HTML5 自动聚焦 属性
    c语言学习笔记(2)——预备知识
    java实现文件的上传和下载
    拓网超大文件上传组件
    java+下载+大文件断点续传
    word内容带样式粘贴到富文本编辑器
    php上传整个文件夹
    超大文件上传系统
    java+web中上传文件夹
    vue上传文件
  • 原文地址:https://www.cnblogs.com/zhaotq/p/9308882.html
Copyright © 2011-2022 走看看