基于vue.js实现远程请求json的select控件
基本思路
- 前端把需要的参数类型编码传到后台,后台返回相应的参数列表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>
基于vue.js实现远程请求json的select控件的更多相关文章
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
随机推荐
- MySQL篇,第二章:数据库知识2
MySQL 数据库 2 名词介绍 1.DB(Database) DB就是数据库,存储数据的仓库 2.DBMS(Database Management System) 数据库管理系统 管理数据库的软件, ...
- Cython 使用
链接: Cython是一个快速生成Python扩展模块的工具,从语法层面上来讲是Python语法和C语言语法的混血,当Python性能遇到瓶颈时,Cython直接将C的原生速度植入Python程序,这 ...
- tumblr热度
- run
和配置块不同,运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法运行块通常用来注册全局的事件监听器.例如,我们会在.run()块中设置路由事件的监听器以及过滤未经授权的请 ...
- Java中double转BigDecimal的注意事项
先上结论:不要直接用double变量作为构造BigDecimal的参数! 线上有这么一段Java代码逻辑: 1,接口传来一个JSON串,里面有个数字:57.3. 2,解析JSON并把这个数字保存在一个 ...
- react写单选按钮或table标签
首先,原理是一样的: class Loca_choose_wrap extends Component{ constructor(){ super(); this.state={ port_name: ...
- hdu4059 The Boss on Mars 容斥原理
On Mars, there is a huge company called ACM (A huge Company on Mars), and it’s owned by a younger bo ...
- Java中final的用法总结
1. 修饰基础数据成员的final 这是final的主要用途,其含义相当于C/C++的const,即该成员被修饰为常量,意味着不可修改.如java.lang.Math类中的PI和E是f ...
- django+uwsgi+nginx数据表过大引起"out of memory for query result"
昨天负责的一个项目突然爆“out of memory for query result”. 背景 项目的数据表是保存超过10m的文本数据,通过json方式保存进postgres中,上传一个13m的大文 ...
- Django中需要注意的点
需要注意的点 请求相关 注销的 用法 def logout(request): request.session.flush()#输入此内容可以注销用户登录信息 # 即将session信息清除掉 ret ...