vue中下拉框组件的封装
原理vueelement中,需要封装一个对应的下拉款组件。第一步:在api_domain.js中添加后台的请求接口//获取下拉框的接口 从redis中domainGetDomainKeyRedis: params => {return axios.post('domain-manager/domain/getDomainKeyRedis',qs.stringify(...
·
原理
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;
}
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)