Vue中下拉框的封装

1.【子组件】

<template>
  <div>
    <el-select v-model="svalue" placeholder="请选择" filterable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  name: "Combox",
  data() {
    return {
      options: [],
      svalue: ""
    };
  },
  methods: {
    _dataTransform(data) {
      let _data = [];
      for (let i = 0; i < data.length; i++) {
        _data[i] = {};
        _data[i].label = data[i][this.fileType.label];
        _data[i].value = data[i][this.fileType.value];
      }
      return _data;
    }
  },
  watch: {
    //判断下拉框的值是否有改变
    svalue(val, oldVal) {
      // console.log('new: %s, old: %s', val, oldVal)
      if (val != oldVal) {
        this.$emit("input", this.svalue);
      }
    }
  },
  props: {
    url: {
      type: String
    }, //导入的url地址
    // urlName: {
    //   type: String
    // }, //跨域请求标志
    metName: {
      type: String
    }, //方法名
    dtName: {
      type: String
    }, //条件参数
    value: {
      type: String
    }, //接受外部v-model传入的值
    fileType: {
      type: Object
    } //定义请求回来的json数据格式
  },
  mounted() {
    //初始话下拉框的值
    console.log(this);
    this.svalue = this.value;
    let parames = {
      
      functionName: this.url,
      methodName: this.metName,
      data: {
        // 查询条件
        dictTypeCode: this.dtName
      }
    };
    console.log(this);
    this.http(JSON.stringify(parames))
      .then(res => {
        console.log(res);
        alert(JSON.stringify(res.data.dictList));
        this.options = this._dataTransform(res.data.dictList);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>
<style scoped>
</style>

2.【父组件】

//引入组件
 
 import sltopn from '@/components/select/sltopn.vue' 
 
//注册组件
 
components: {sltopn }
 
//使用
 
 <sltopn :url="'productbiz.service.commontable.PrdDictService'" :metName="'queryDict'"  :dtName="'fundType'"  :fileType="{'value':'dictValue','label':'dictName'}"></sltopn>