vue中下拉框組件的封裝方式

更新時(shí)間：2023年01月18日 11:55:09 作者：田湖_怎么了

這篇文章主要介紹了vue中下拉框組件的封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue下拉框組件的封裝

原理

vue element中，需要封裝一個(gè)對應(yīng)的下拉款組件。

第一步：在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，內(nèi)容

/**
 * _this為傳過來的this
 * 
 * 根據(jù)參數(shù)str,去獲取到對應(yīng)的下拉框的值
 * 
 * paramName,接收的數(shù)組，如'type'
 * 
 * 先去redis總查詢，如果沒有值，再去數(shù)據(jù)庫中查詢
 */
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，是傳遞到后臺方法的查詢條件，

就是在【域定義管理】中簡稱，點(diǎn)擊【域值】按鈕可看到對應(yīng)的下拉框數(shù)據(jù)

type，是接受查詢出的list的參數(shù)，在頁面中我定義了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”

然后寫一個(gè)方法formatType

formatType: function (row, column) {//類型轉(zhuǎn)換
				
				for(var a = 0 ;a< this.options.length ; a++){
					if(row.ptType == this.options[a].key){
						return this.options[a].name;
					}
				}
				
			},

vue封裝遠(yuǎn)程下拉框組件

之前封裝了一個(gè)遠(yuǎn)程搜索的輸入框，靜態(tài)在Vue官網(wǎng)看到一個(gè)類似的遠(yuǎn)程搜索下拉框，今天也封裝一個(gè)遠(yuǎn)程搜索下拉框，面對不同的需求

我們修改了官方提供的代碼來封裝了

父組件

RemoteSearch.vue

vue的參數(shù)是可以通過封裝在props內(nèi)，被其他界面引用

注意：

一：js中在調(diào)用json格式數(shù)組的值的時(shí)候——有兩種形式

以下為dataList數(shù)組

?形式一：dataList[0].name
形式二：dataList[0][name]

在有些時(shí)候會把**.變量**識別成調(diào)用，所以在一些情況下使用第二個(gè)效果更好

js的數(shù)組手動設(shè)置值(給dataList設(shè)置一個(gè)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導(dǎo)入對應(yīng)的組件，通過components來調(diào)用，并通過類似標(biāo)簽的形式來聲明

子組件通過父組件提供的props的參數(shù)重寫（修改）父組件的參數(shù)

如果子組件不調(diào)用，props的參數(shù)就會是默認(rèn)的值。

子組件可以通過在標(biāo)簽內(nèi)使用:特定值的方式來修改值

重置的按鈕實(shí)現(xiàn)，可以參考之前封裝遠(yuǎn)程搜索輸入框的帖子