ruoyi-vue列表显示关联

之前我们讲解了如何使用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

好了，所有服务重新启动，然后让你重新登录，登录后就可以看到这样的页面了。

好了，这样就是一个关联查询病显示对应字段的一个完整的例子了。