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

Posted 2020-11-20 zjoe80

基本思路

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