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

vue下拉框组件的封装

原理

vue element中，需要封装一个对应的下拉款组件。

第一步：在api_domain.js中添加后台的请求接口

//获取下拉框的接口 从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));
},

第二步，在文件夹api中新建getselect.js，内容

/**
 * _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);
	　　});
	}
}

使用

引入js

import {getselect} from '@/api/getselect'

取值

//获取资源类型getselect(this,'restype','type');

restype，是传递到后台方法的查询条件，

就是在【域定义管理】中简称，点击【域值】按钮可看到对应的下拉框数据

type，是接受查询出的list的参数，在页面中我定义了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>

在table中怎么去显示类型为中文名称

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

注意： :formatter=“formattype”

然后写一个方法formattype

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;
					}
				}
				
			},

vue封装远程下拉框组件

之前封装了一个远程搜索的输入框，静态在vue官网看到一个类似的远程搜索下拉框，今天也封装一个远程搜索下拉框，面对不同的需求

我们修改了官方提供的代码来封装了

父组件

remotesearch.vue

vue的参数是可以通过封装在props内，被其他界面引用

注意：

一：js中在调用json格式数组的值的时候——有两种形式

以下为datalist数组

形式一：datalist[0].name
形式二：datalist[0][name]

在有些时候会把**.变量**识别成调用，所以在一些情况下使用第二个效果更好

js的数组手动设置值(给datalist设置一个value值)

datalist.value = ?

以下为引用的vue界面

<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>

只需要通过import导入对应的组件，通过components来调用，并通过类似标签的形式来声明

子组件通过父组件提供的props的参数重写（修改）父组件的参数

如果子组件不调用，props的参数就会是默认的值。

子组件可以通过在标签内使用:特定值的方式来修改值

重置的按钮实现，可以参考之前封装远程搜索输入框的帖子