Element-UI合集之el-select

前提条件：传统开发模式下（非NodeJs），直接引用文件

引入文件

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script><!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="<%=ctx %>/scripts/frame/jquery/jquery-2.2.3.min.js"></script>

前端Html部分

<el-form :inline="true" style="margin: 0 auto 20px auto;width: 80%;" :model="sqform" :rules="rules" status-icon ref="sqform">选择机器：<el-form-item prop="jqid"><el-select v-model="sqform.jqid" filterable placeholder="请选择机器ID" @change="handleSqIpFilter"><el-optionv-for="item in jqids":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item prop="jqip"><el-select v-model="sqform.jqip" filterable placeholder="请选择机器IP"><el-optionv-for="item in jqips":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-button class="filter-item filter-button" type="warning" @click="sqform.jqid='';sqform.jqip='';">清除</el-button>
</el-form>

前端Js部分

data: function() {return {jqids: [],jqips: [],sqform:{jqid: "",jqip: ""}};},
created() {
},
methods: {getJqxx() {var that = this$.ajax({url:ctx+"/admin/jqxx/jqget.ajax",method:"POST",data:that.listQuery,success:function (response) {console.log(response);that.jqids = response.jqids// that.jqips = response.jqips}})},handleSqIpFilter() {var that = thisthis.sqform.jqip=""$.ajax({url:ctx+"/admin/jqxx/jqget.ajax",method:"POST",data:that.sqform,success:function (response) {console.log(response);that.jqips = response.jqips}})}
}

Java服务端

@RequestMapping(value = "/jqget.ajax",method= RequestMethod.POST,produces = {"application/json;charset=UTF-8"})
@ResponseBody
public String jqget(HttpServletRequest request) throws Exception {String jqid = request.getParameter("jqid");List<Map<String, Object>> jqids = jqxxManager.findJqidList();//获取全部jqid【Map的key为value、label】List<Map<String, Object>> jqips = jqxxManager.findJqipList(jqid);//根据jqid获取jqipMap<String, Object> map = new HashMap<String, Object>();map.put("jqids", jqids);map.put("jqips", jqips);return new Gson().toJson(map);
}

Element-UI合集之el-select相关推荐

element UI中的select选择器的change方法需要传递多个值
如上图是element UI的一个基本的select选择器根据element UI的官网事件调用,有一下几种: 如果直接调用上述事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参 ...
api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集第一款官方WeUI组件库 " 地址: ht ...
计算机画面的音乐素材,音效素材：高科技用户界面UI点触计算机数据分析全息音效合集...
音效素材:高科技用户界面UI点触计算机数据分析全息音效合集包含1000多组模块化用户界面音效,由最好的制造商"EURORACK"亲自录制.MODULAR UI是由世界著名的音响设 ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
element UI select下拉选项位置问题
element UI select下拉选项位置问题在使用elementUI下拉选项时,可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大,这个是由于elementUI自己设置的根据下拉框 ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
UI UX 小提示合集 -- 第一集
UI & UX 小提示合集 -- 第一集 17个小提示让你的设计瞬间升级我了解设计一个既漂亮又实用的界面的过程 - 通常较长,而且需要反复修改.大多数设计师都有类似的经历. 不过,多年的经验 ...
ui设计网站：全网最热门的30个UI设计网站合集
转载一篇ui设计网站整理的文章 1．UI Garage 传送门:https://uigarage.net/ UI设计灵感炸裂之地,每日精心挑选UI灵感和模式,可以从平台.排序方式.类别.日期等分类筛选 ...
UI设计中AI黑科技插件合集
俗话说:欲善其事必先利其器. 作为设计师怎么能缺少神器般的AI黑科技插件?随着插画风分析图.轴测图.效果图等的流行,adobe Illustrator在设计类软件里的分量也越来越重.逆天的PS插件很多 ...

Element-UI合集之el-select

Element-UI合集之el-select相关推荐

最新文章

热门文章