基本思路

• 前端把需要的參數類型編碼傳到後臺，後臺返回相應的參數列表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控件