vue+ElementUI实现表关联

表关联使用ElemntUI选择下拉框实现的，不懂的去可以去官网查看使用说明。
声明： 这是我自身对一对多的理解，希望大家共同学习，共同进步。

1. 一对多的关系

何为一对多？

就比如基地和地块这种关系，一个基地(base)有多个地块(land)，而一个地块只对应一个基地。

数据库的实现： 在“多”的一方加上“一”的id字段。比如：base中的有 base_id ，在 land 中有自己的 land_id，也有关联关系的 base_id 。
xml中的实现： 在“多”的一方的xml中用左外连接拼接相等的关联关系。比如： SELECT * FROM pro_lands l LEFT JOIN pro_bases b ON l.base_id = b.base_id
实现方法： 在多的一方维护一的表。即在"多"的一方中加上"一"的实体类。比如： 有base和land这两个类，在land实体类中加上base类，则land类中有自身的属性，也有base所有的属性。

2. 数据库和实体类的实现

1. 数据库中做表关联
   
   
2. 再给地块对象中添加一个基地对象，并生成get,set方法
   

3. xml中的实现

1. 封装结果集
   association用于一对一的情况，用于封装一个对象。
   collection用于多对一的情况，用于封装一个集合。

比如另外一个例子：user表和dept表以及roles表。
用户和部门是多对一，拆分为一对一分析，使用association关联。
而用户和角色是多对多。多对多一般拆分一对多分析，使用collection关联。

以下用若依开源系统中的代码作为演示：

	<resultMap type="SysUser" id="SysUserResult">
		<id     property="userId"       column="user_id"      />
		<result property="deptId"       column="dept_id"      />
		<result property="userName"     column="user_name"    />
		<result property="nickName"     column="nick_name"    />
		<result property="email"        column="email"        />
		<result property="phonenumber"  column="phonenumber"  />
		<result property="sex"          column="sex"          />
		<result property="avatar"       column="avatar"       />
		<result property="password"     column="password"     />
		<result property="status"       column="status"       />
		<result property="delFlag"      column="del_flag"     />
		<result property="loginIp"      column="login_ip"     />
		<result property="loginDate"    column="login_date"   />
		<result property="createBy"     column="create_by"    />
		<result property="createTime"   column="create_time"  />
		<result property="updateBy"     column="update_by"    />
		<result property="updateTime"   column="update_time"  />
		<result property="remark"       column="remark"       />
		<association property="dept"    column="dept_id" javaType="SysDept" resultMap="deptResult" />
		<collection  property="roles"   javaType="java.util.List"        resultMap="RoleResult" />
	</resultMap>
	
	<resultMap id="deptResult" type="SysDept">
		<id     property="deptId"   column="dept_id"     />
		<result property="parentId" column="parent_id"   />
		<result property="deptName" column="dept_name"   />
		<result property="orderNum" column="order_num"   />
		<result property="leader"   column="leader"      />
		<result property="status"   column="dept_status" />
	</resultMap>
	
	<resultMap id="RoleResult" type="SysRole">
		<id     property="roleId"       column="role_id"        />
		<result property="roleName"     column="role_name"      />
		<result property="roleKey"      column="role_key"       />
		<result property="roleSort"     column="role_sort"      />
		<result property="dataScope"     column="data_scope"    />
		<result property="status"       column="role_status"    />
	</resultMap>
	
	<sql id="selectUserVo">
        select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark,
        d.dept_id, d.parent_id, d.dept_name, d.order_num, d.leader, d.status as dept_status,
        r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status
        from sys_user u
		    left join sys_dept d on u.dept_id = d.dept_id
		    left join sys_user_role ur on u.user_id = ur.user_id
		    left join sys_role r on r.role_id = ur.role_id
    </sql>

我们采用一对一方式。

2. 重写sql语句

原来是单表，现在使用左外连接。

4. 后台逻辑的实现

1. 查所有的基地信息
   写一个接口查所有的基地信息

BasesMapper.xml

---

basesMapper.java

---

IBasesService.java

---

BasesServiceImpl.java

2. 在BasesController层中写一个接口调用刚才的方法

接口的请求地址为/asset/bases/basesSelect

5. 前台vue的实现

1. 为前端的接口写一个新的方法，并导入到页面中
   
   

2. 在页面初始化和新增修改时调用getBasesSelect()方法，请求接口获取基地的数据，将数据存储到basesOptions中。
   

3. elementUI下拉框的实现
   
   v-model是本身表单的数据，不用修改。
   选择下拉框的内容从为basesOptions获取，注意value为baseId，这换个参数和前面的v-model中的数据是一致的。

4. 修改按钮的方法要调整
   修改时选择框没有内容时要进行赋值

至此，新增，修改没有问题。

转载：https://blog.csdn.net/Dreamboy_w/article/details/104849117