vue中下拉框组件的封装方式

//获取下拉框的接口 从redis中
  domainGetDomainKeyRedis: params => { 
	  return axios.post('domain-manager/domain/getDomainKeyRedis',qs.stringify(params));
},

//获取下拉框的接口 从DB中
  domainGetDomainKeyDB: params => { 
	  return axios.post('domain-manager/domain/getDomainKeyDB',qs.stringify(params));
},

/**
 * _this为传过来的this
 * 
 * 根据参数str,去获取到对应的下拉框的值
 * 
 * paramName,接收的数组，如'type'
 * 
 * 先去redis总查询，如果没有值，再去数据库中查询
 */
import api from '@/api/api_domain'


export function GetSelect(_this,str,paramName) {
	
    let para = {
		key: str
	};
	
	if(typeof str === "undefined" || str == ""){
	//	return options;
	}else{
		_this.$api.domain.domainGetDomainKeyRedis(para).then((res) => {
																									
			_this[paramName] = res.data.data.listDomainDefine;
												
		}).catch((err)=>{
	　　　　console.log(err);
	　　});
	}
}

import {GetSelect} from '@/api/getSelect'

//获取资源类型GetSelect(this,'resType','type');

<el-form-item label="类型" prop="resType">	
	<el-select v-model="addForm.resType" filterable placeholder="请选择" style="width:100%">
		<el-option v-for="item in type" :key="item.key " :label="item.name" :value="item.key">
		</el-option>
	</el-select>					
</el-form-item>

<el-table-column prop="ptType" label="类型" min-width="10%" :formatter="formatType" >
			</el-table-column>

formatType: function (row, column) {//类型转换
				
				for(var a = 0 ;a< this.options.length ; a++){
					if(row.ptType == this.options[a].key){
						return this.options[a].name;
					}
				}
				
			},

dataList.value = ?

<template>
  <div>
    <RemoteSearch :choose-flag="0" :auto-complete-column="name" ref="refreshData"></RemoteSearch>
    <el-button type="primary" @click="refreshChartSearch" style="margin-left: 10px">重置</el-button>
  </div>
</template>

<script>
import RemoteSearch from "@/components/select/RemoteSearch";
export default {
  components: {
    RemoteSearch
  },
  data(){
    return {
    }
  },
  methods:{
    refreshChartSearch(){
      this.$nextTick(() => {
        this.$refs.refreshData.refreshData();
        //DOM渲染完毕后就能正常获取了
      })
    },
  },
}
</script>

<style scoped>

</style>

placeholder="请输入内容"