ruoyi-vue列表搜索姓名从文本框改为下拉框

我们做好了列表功能后，发现这里的搜索不够智能，这里是文本搜索的，为了更友好，应该是下拉选择。

由于下拉框我们可以在用户的状态那边去找个例子，所以这里我们可以这样做，找到 ruoyi-ui/src/views/system/user/index.vue 文件，里面的这里的代码 

 

 我们拷贝如下代码

                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>

然后来到 ruoyi-ui/src/views/system/salary/index.vue 这里，找到员工编号搜索这里，将这里的内容从

        <el-input
          v-model="queryParams.personId"
          placeholder="请输入员工编号"
          clearable
          @keyup.enter.native="handleQuery"
        />

替换，然后整体改成这样

      <el-form-item label="员工姓名" prop="personId">
        <el-select v-model="queryParams.personId" placeholder="员工姓名" clearable style="width: 240px">
          <el-option v-for="user in userOptionList" :key="user.userId" :label="user.userName" :value="user.userId" />
        </el-select>
      </el-form-item>

如下图：

这里面是这样，我们定义了一个变量 userOptionList，让其遍历循环给user，然后输出user.userName作为label，user.userId作为值，然后我们在下面js那里去给其赋值。

找到这里的代码：

里面加一行

 userOptionList: [], 

像这样

然后到上面的 import { listSalary, getSalary, delSalary, addSalary, updateSalary } from "@/api/system/salary" 这里：

 增加一行引入，使得其能调用系统已经给我们提供好了的获取用户列表的接口。

 import { listUser } from "@/api/system/user"; 

像这样：

 之后来到js里面的methods方法里面

这里增加一个方法去给 userOptionList 给赋值。

    getUserOPtionList() {
      listUser(this.queryParams).then(response => {
        this.userOptionList = response.rows
      });
    },

效果如图：

然后，我们来到页面上面刷新，发现下拉框出现了，但是没值。

 

 原来是我们忘记给它在初始化的时候加载了，那么我们改改这里的代码。

给 created 方法增加一行

this.getUserOPtionList();

如下：

然后我们再刷新页面，可以看到下拉列表有了，那么我们试试搜索看看。

好了，这说明这个功能做的不错，但是我注意到，这个修改里面还是不对。

那么我们再将修改这里如法炮制，也改一下。

找到这里

然后将刚刚的修改也换一下，换成这样

        <el-form-item label="员工姓名" prop="personId">
          <el-select v-model="form.personId" placeholder="员工姓名" clearable style="width: 240px">
            <el-option v-for="user in editUserOptionList" :key="user.userId" :label="user.userName" :value="user.userId" />
          </el-select>
        </el-form-item>

如图：

然后我们这里注意的是，需要定义不同的变量叫 editUserOptionList，然后v-model这里也要写 form.personId，好了，下面是js进行绑定变量。

editUserOptionList: [],

如图：

好了，然后需要再编辑的时候对数据进行获取然后赋值。

找到 handleAdd 和 handleUpdate，粘贴如下代码：

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

如图：

 然后我们刷新页面或者你不成功的话，ctrl+c暂停前端服务，重新 npm run dev 将服务开起来，然后我们看看效果。

好啦，现在我们实现了列表页面用户姓名的一个下拉框的关联，使其使用起来更加方便，而且方便新增和修改。