假设自助机的外观有以下几种： 

在对自助机进行管理时想要添加一台新的自助机，需要填写它的外观信息。

我们希望，在下拉框中选择自助机外观时，能自动填写自助机外观对应的编号。

数据库表asm_dict如下：

CREATE TABLE `asm_dict` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
  `propKey` varchar(45) NOT NULL COMMENT '属性值',
  `propValue` varchar(45) NOT NULL COMMENT '属性名称',
  `typeId` varchar(45) NOT NULL COMMENT '所属类型ID',
  `description` varchar(45) DEFAULT NULL COMMENT '属性描述',
  PRIMARY KEY (`id`),
  KEY `for_prop_type` (`typeId`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 COMMENT='数据字典';

前台页面

前台页面asmAdd.vue如下：

<template>
    <div class="sys-page">
        <el-form :model="addForm" :rules="rules" label-width="150px" ref="addForm" :inline="true">
            <el-form-item label="自助机外观编号：">
                <el-input align="right" width="150px" v-model="addForm.asmExteriorNo" placeholder="请输入自助机外观编号" readonly></el-input>
            </el-form-item>
            <el-form-item label="自助机外观：">
                <el-select v-model="addForm.asmExterior" placeholder="请输入自助机外观" @change="getSelected">
                    <el-option v-for="item in asmExteriorList" :label="item.propValue" :value="item.propValue"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: "asmAdd",
        data(){
            return{
                addForm:{},
                asmExteriorList:[]
            }
        },
        mounted(){
            this.getAsmExteriorList()
        },
        methods:{
            getAsmExteriorList(){
                this.$axios.get(this.$appConfig.serviceBaseUrl + '/api/getAsmExteriorList').then(res => {
                    this.asmExteriorList = res
                }).catch(err => {
                    console.log(err)
                })
            },
            //会将:value的值传递到val
            getSelected(val){
                for(let i=0;i<this.asmExteriorList.length;i++){
                    if(this.asmExteriorList[i].propValue==val){
                        this.addForm.asmExteriorNo=this.asmExteriorList[i].propKey
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>

 后台获取自助机外观列表

实体层

package cn.com.lmq.entity;

import java.io.Serializable;
import javax.persistence.*;

@Entity
@Table(name="asm_dict")
@NamedQuery(name="AsmDict.findAll", query="SELECT a FROM AsmDict a")
public class AsmDict implements Serializable {
	private static final long serialVersionUID = 1L;

	@Id
	private int id;
	private String propKey;
	private String propValue;
	private String typeId;
        private String description;

	public AsmDict() {
	}

	public int getId() {
		return this.id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getDescription() {
		return this.description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getPropKey() {
		return this.propKey;
	}

	public void setPropKey(String propKey) {
		this.propKey = propKey;
	}

	public String getPropValue() {
		return this.propValue;
	}

	public void setPropValue(String propValue) {
		this.propValue = propValue;
	}

	public String getTypeId() {
		return this.typeId;
	}

	public void setTypeId(String typeId) {
		this.typeId = typeId;
	}

}

接口层

package cn.com.lmq.repository;

import java.util.List;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import cn.com.lmq.entity.AsmDict;

public interface DictRepository extends JpaRepository<AsmDict, Integer> {
	List<AsmDict> findByTypeId(String typeId);
}

服务层

package cn.com.lmq.service;


import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


import cn.com.lmq.entity.AsmDict;
import cn.com.lmq.repository.DictRepository;
@Service
@Transactional
public class DictService {
	
	@Autowired
	private DictRepository repository;

	public List<AsmDict> getAsmExteriorList() {
		List<AsmDict> list = repository.findByTypeId("asm_exterior_no");
		return list;
	}

		
}

控制器层

package cn.com.lmq.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import cn.com.lmq.entity.AsmDict;
import cn.com.lmq.service.DictService;

@RestController
@RequestMapping("/api")
public class DictController {

	@Autowired
	private DictService service;

	@RequestMapping(value = "/getAsmExteriorList", method = RequestMethod.GET )
	public List<AsmDict> getAsmExteriorList(){
		List<AsmDict> list = service.getAsmExteriorList();
		return list;
	}
}