zoukankan      html  css  js  c++  java
  • vue+elementui selet框组件封装 传值

    <template>
    <el-select v-model="svalue" placeholder="请选择" filterable clearable @change="handleButton">
    <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </el-option>
    </el-select>
    </template>
    <!--调用写法 @handleButton='handleButton' handleButton是方法名-->
    <!--<xdh-select :dictType="'IT-BU-0002'" v-model="form.inter_options_value" @handleButton="handleButton"></xdh-select>-->

    <script>
    import axios from 'axios';
    import {platform} from '@/api/address';

    export default {
    name: 'XdhSelect',
    data() {
    return {
    options:[],
    svalue: this.value
    }
    },
    props: {
    dictType: {
    type:String
    },//请求的码表值
    value: {
    type: String
    }//接受外部v-model传入的值
    },
    methods: {
    // 获取下拉框数据
    getDictionary_option(dictType){
    this.options = JSON.parse(localStorage.getItem("dictList"))[dictType].obj;

    /*let temp = [];
    let that= this;
    return axios({
    method: 'get',
    url: platform + 'platform/application/dict/common/findByDictType?dictType='+dictType
    }).then(function (res) {
    let error = ""
    if(res.data.code == 0){
    let tempData = res.data.result
    for (let i in tempData){
    let test = {};
    test ={ value:i,label:tempData[i]}
    temp.push(test)
    }
    }else{
    error = res.data.msg
    }
    return new Promise((resolve, reject)=>{
    if (error !== ''){
    reject(error)
    return
    }
    that.options = temp;
    resolve(temp)
    })
    });*/
    },
    // 下拉框点击事件
    handleButton(){
    /* 子组件通过事件发射向父组件传递事件及参数,$emit即为发射事件
    第一个参数为向父组件传递的事件名,第二个参数为向父组件传递的参数 */
    this.$emit( 'handleButton', this.svalue);
    }
    },
    watch:{
    //判断下拉框的值是否有改变
    value(val) {
    this.svalue = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
    },
    svalue(val, oldVal){
    if(val!=oldVal) {
    this.$emit("input", val);//③组件内对myResult变更后向外部发送事件通知
    }
    }
    },
    mounted(){
    // this.svalue=this.value;//初始话下拉框的值
    this.getDictionary_option(this.dictType);
    }
    }
    </script>
  • 相关阅读:
    弹性盒子模型属性之flex-shrink
    Git----基本操作
    Git----简介
    ES6常用语法
    nginx学习
    Shell基础命令(二)
    Linux目录
    Shell基础命令(一)
    CRM之分页
    Django之ModelForm组件
  • 原文地址:https://www.cnblogs.com/wplcc/p/10930745.html
Copyright © 2011-2022 走看看