之前我们讲解了如何使用ruoyi去自动生成代码，自动做成菜单，增删改查的功能都有了，现在我们来做点改进，比如这里需要显示正确的姓名。
而且同时我们还想让这个自增长编号这一列不再显示，那么我们需要打开这段html的代码。
ruoyi-ui/src/views/system/salary/index.vue 打开这个文件
找到这里
我们可以把这里的 <el-table-column label="自增长编号" align="center" prop="id" />
改为 <el-table-column label="自增长编号" align="center" prop="id" v-if="false"/>
然后我们刷新页面，发现这里的自增长编号已经隐藏了。
然后就是如何显示员工编号了，我们看一下表结构就知道了
salary 表里面的 personId 关联的就是 sys_user 表里面的 user_id，那我们可以做一个关联查询看看。
找到这个文件 ruoyi-admin/src/main/resources/mapper/system/SalaryMapper.xml， 然后找到这里的代码
这里改改，我们做成 left join 看看。
改为这样的查询SQL
select id, u.user_name, personId, month, salary from salary as s left join sys_user as u on s.personId = u.user_id
然后我们将这个查询的字段和属性进行一个匹配
找到这里的代码，增加一行
<result property="userName" column="user_name" />
如下：
好了，然后我们需要将这个字段展示病返回，然后渲染出来。
找到 ruoyi-admin/src/main/java/com/ruoyi/system/domain/Salary.java 文件里面增加一个成员属性然后做一个 get 方法
增加一段代码
/** 用户姓名 */@Excel(name = "用户姓名")private String userName;
成这样：
然后下面再增加get方法
public String getUserName() {return userName;}
成这样：
好，之后再在最底下的查询返回里面增加这一列。
.append("userName", getUserName())
成这样：
然后我们需要在页面上面进行展示，所以我们打开 ruoyi-ui/src/views/system/salary/index.vue 文件，找到这里：
<el-table-column label="员工编号" align="center" prop="personId" />
改为
<el-table-column label="员工姓名" align="center" prop="userName" />
然后我们可以将服务停止，重新编译，得到结果。
1.首先把服务ctrl+c停止掉，在项目目录下执行 mvn clean install -Dmaven.test.skip=true
2.然后再在 ruoyi-admin 下面的文件夹target里面执行 java -jar ruoyi-admin.jar ，不过可能提示你 Error: Unable to access jarfile ruoyi-admin.jar，这是因为你需要重新进一下这个目录，可以执行 cd ../ && cd target && java -jar ruoyi-admin.jar
3.然后就在前端的 ruoyi-ui 里面执行 npm run dev
好了，所有服务重新启动，然后让你重新登录，登录后就可以看到这样的页面了。
好了，这样就是一个关联查询病显示对应字段的一个完整的例子了。
