基于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 ...
随机推荐
- TX2-static-dhcp-network
前言 之前是使用私有的镜像而不是按照nvidia官网中JetPack3.2套件的镜像对TX2板子进行刷机,刷机之后发现网络不能正常连接,即使已经连接了有线网口,经过大师的指点才终于明白了其中的一点点奥 ...
- 【opencv基础】OpenCV installation stuck at [ 98%] Built target opencv_perf_stitching with no error
前言 按照官网步骤安装opencv的过程中进行到98%时一直没有继续进行. 原因 后台一直在编译运行,只需等待即可,参考here: well, turns out it gets stuck for ...
- 【leetcode】9-PalindromeNumber
problem Palindrome Number 回文数字: 什么是回文数字? 要求不能使用字符串: 翻转一半的数字: 如何判断数字到一半啦? 参考 1.leetcode-problem: 完
- MySQL中变量的使用
一.认识MySQL 中的变量 在MySQL中变量的绝大部分的用处都是在存储过程和存储函数中. 当然也可以抛开存储过程和存储函数来单独使用. 变量在MySQL中的运用和在编程语言中的运用大体相同 二.M ...
- 九度OJ-1042-最长公共子序列(LCS)
题目1042:Coincidence 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4045 解决:2208 题目描述: Find a longest common subsequence ...
- Unity 灯光系统详解
Unity 灯光系统详解 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心 ...
- C语言--第七周作业评分(5班)
作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1304 一.评分要求 要求1 完成PTA第七周所有题,总共两次题,每次12.5 ...
- 2018.4.2 sqlite优化
一.参数优化. ```PRAGMA foreign_keys=ON;PRAGMA cache_size=8000;PRAGMA synchronous=OFF;PRAGMA temp_store=ME ...
- Blender 简单齿轮驱动
直入主题. 1. 用户设置里,勾选扩展网格(Add Mesh: Extra Objects):这样可以直接新增简单齿轮了,免得自己再造轮子. 2. 新增2个齿轮,12赤为主动轮,驱动24赤的被动轮: ...
- Vue.js系列之项目搭建
项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...