基本思路

  • 前端把需要的参数类型编码传到后台,后台返回相应的参数列表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控件的更多相关文章

  1. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于 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 时代,包括其插件在需要时就引 ...

  3. 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]

    基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...

  4. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  5. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  8. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  9. [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

随机推荐

  1. TX2-static-dhcp-network

    前言 之前是使用私有的镜像而不是按照nvidia官网中JetPack3.2套件的镜像对TX2板子进行刷机,刷机之后发现网络不能正常连接,即使已经连接了有线网口,经过大师的指点才终于明白了其中的一点点奥 ...

  2. 【opencv基础】OpenCV installation stuck at [ 98%] Built target opencv_perf_stitching with no error

    前言 按照官网步骤安装opencv的过程中进行到98%时一直没有继续进行. 原因 后台一直在编译运行,只需等待即可,参考here: well, turns out it gets stuck for ...

  3. 【leetcode】9-PalindromeNumber

    problem Palindrome Number 回文数字: 什么是回文数字? 要求不能使用字符串: 翻转一半的数字: 如何判断数字到一半啦? 参考 1.leetcode-problem: 完

  4. MySQL中变量的使用

    一.认识MySQL 中的变量 在MySQL中变量的绝大部分的用处都是在存储过程和存储函数中. 当然也可以抛开存储过程和存储函数来单独使用. 变量在MySQL中的运用和在编程语言中的运用大体相同 二.M ...

  5. 九度OJ-1042-最长公共子序列(LCS)

    题目1042:Coincidence 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4045 解决:2208 题目描述: Find a longest common subsequence ...

  6. Unity 灯光系统详解

    Unity 灯光系统详解 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心 ...

  7. C语言--第七周作业评分(5班)

    作业链接:https://edu.cnblogs.com/campus/hljkj/CS2017-5/homework/1304 一.评分要求 要求1 完成PTA第七周所有题,总共两次题,每次12.5 ...

  8. 2018.4.2 sqlite优化

    一.参数优化. ```PRAGMA foreign_keys=ON;PRAGMA cache_size=8000;PRAGMA synchronous=OFF;PRAGMA temp_store=ME ...

  9. Blender 简单齿轮驱动

    直入主题. 1. 用户设置里,勾选扩展网格(Add Mesh: Extra Objects):这样可以直接新增简单齿轮了,免得自己再造轮子. 2. 新增2个齿轮,12赤为主动轮,驱动24赤的被动轮: ...

  10. Vue.js系列之项目搭建

    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...