原理

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