文档章节

基于vue.js实现远程请求json的select控件

小林攻城狮
 小林攻城狮
发布于 2018/01/30 16:50
字数 282
阅读 1850
收藏 1

基本思路

  • 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件

具体实现

  • 前端代码
<select v-model="template.type" class="form-control">
      <option value="">请选择...</option>
      <option v-for="option in options" v-bind:value="option.macroId">
              {{ option.name }}
      </option>
</select>
  • js调用
var vm = new Vue({
    data: {
        options: [],
        template: {
            type: null
        }
    },
    methods: {        
        getTemplateType: function() {
            $.post('../../sys/macro/value?value=templateType', null, function(data){
                vm.options = data;
            });
        }
    },
    created: function() {
        this.getTemplateType();
    }
})
  • controller实现
/**
 * 获取某个类型所有参数值,用于前台构建下拉框
 * @param value
 * @return
 */
@RequestMapping("/value")
public List<SysMacroEntity> listMacroValue(@RequestParam String value) {
	return sysMacroService.listMacroValue(value);
}
  • 查询sql语句
<select id="listMacroValue" resultType="SysMacroEntity">
	SELECT
		macro_id,
		name,
		value
	FROM
		sys_macro
	WHERE
		type_id =(
			SELECT
				macro_id
			FROM
				sys_macro
			WHERE
				value = #{value}
		)
	AND STATUS = 1
	ORDER BY macro_id;
</select>

传送门

© 著作权归作者所有

小林攻城狮
粉丝 21
博文 13
码字总数 3903
作品 0
程序员
私信 提问
使用vue-resource库发送请求获取数据

使用vue-resource库发送请求获取数据 大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据, 在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐...

不负好时光
2017/10/20
483
0
干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

wdlhao
2018/09/17
0
0
Vuejs2.0学习笔记之axios&vue-resource

在Vue中发送AJAX请求:Vue本身并不支持发送ajax请求,需要使用第三方插件vue-resources(1.0, 但是2.0中不建议使用)、官方推荐使用axis(2.0);但是也可以用jQuery; 什么是axios?axios是一个基...

码农严选
03/01
67
0
[手把手系列之]Docker 部署 vue 项目

Docker 部署 vue 项目 1.写在前面: Docker 作为轻量级虚拟化技术,拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了...

快狗打车前端团队
05/05
0
0
Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月
2018/04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
420
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
4
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
3
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
7
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部