2021-06-09ruoyi中回显实现

前情：在加载自己写的数据表，列表时，因为在其中用到用户ID，在加载列表时，显示的是数据库表里的用户ID,又不想多表关联查询，但想该ID显示为对应的用户名字。因此用到了回显。

ruoyi中回显实现：

1.在需要回显的table中的元素 绑定 :formatter ， 具体如下：

 //teach对应的是用户Id,因此加载列表时显示用户ID
  

2.formatterUser方法：重点参数row。
调用了selectUser（）方法，并传入两个参数。this.userOptions1是要回显内容的数据，row.teach是列表中对应的ID，用于去匹配回显内容中的用户ID和对应的用户名。

formatterUser(row, column) {
        return this.selectUser(this.userOptions1, row.teach);
      },

3.selectUser（）方法：（核心）
注意该方法中userId、nickName是回显内容中的用户表的对象里的属性，即用户Id和用户名字。
value是table中的用户ID即：row.teach。具体看接受的参数。

selectUser(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
          if (datas[key].userId == ('' + value)) {
            actions.push(datas[key].nickName);
            return true;
          }
        })
        // console.log(actions,22222222222222);
        return actions.join('');
      },

4.this.userOptions1 即保存用户的列表进去：
listUser是获取用户列表的方法

listUser(this.queryParamsDept).then(response => {
        this.userOptions1 = response.rows;
      });

5.注意的点，回显的前提是有内容给它回显，因此userOptions1需要有内容，再去加载需要显示的列表。一般打开界面就会加载列表，因此，获取回显内容的方法要排在加载列表方法之前。
例如：

    created() {
    //获取回显的用户列表
      listUser(this.queryParamsDept).then(response => {
        this.userOptions1 = response.rows;
      });
      //加载列表
      this.getMonthList();
    },