码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-25 18:59:44      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:前台   keyword   control   SQ   res   post   comm   sele   template   

基本思路

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

标签:前台   keyword   control   SQ   res   post   comm   sele   template   

原文地址:https://www.cnblogs.com/ZJOE80/p/9225578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!