原理

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下拉框组件
创建Select.vue组件 //创建Select.vue组件<template><div class="selects"><!-- 选择框 --&g ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
如何使用ember下拉框组件？？
2019独角兽企业重金招聘Python工程师标准>>> 文章来源:ember teach This addon enables legacy view support without ...
java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...
uniapp下拉框组件
之前写过一个小程序的,引入单个下拉框是没有问题的,但是一个页面引入多个下拉框组件的话就会有bug,比如可以同时展开多个下拉框的问题,在此修复了.如果大家有什么好的办法可以告诉我一下嘛~ 小程序选择框_ ...
Vue.js--下拉菜单组件
效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head><meta ...
自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...

vue中下拉框组件的封装

原理

使用

vue中下拉框组件的封装相关推荐

最新文章

热门文章