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

原创
2018/01/30 16:50
阅读数 6.1K

基本思路

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

传送门

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部