基本思路
- 前端把需要的参数类型编码传到后台，后台返回相应的参数列表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">SELECTmacro_id,name,valueFROMsys_macroWHEREtype_id =(SELECTmacro_idFROMsys_macroWHEREvalue = #{value})AND STATUS = 1ORDER BY macro_id;</select>基于vue.js实现远程请求json的select控件
原文地址：https://www.cnblogs.com/ZJOE80/p/9225578.html