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

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

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

 我们拷贝如下代码

1.         <el-input
2.           v-model="queryParams.personId"
3.           placeholder="请输入员工编号"
4.           clearable
5.           @keyup.enter.native="handleQuery"
6.         />        <el-input
7.           v-model="queryParams.personId"
8.           placeholder="请输入员工编号"
9.           clearable
10.           @keyup.enter.native="handleQuery"
11.         /><el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
12.         <el-input
13.           v-model="queryParams.personId"
14.           placeholder="请输入员工编号"
15.           clearable
16.           @keyup.enter.native="handleQuery"
17.         />        <el-input
18.           v-model="queryParams.personId"
19.           placeholder="请输入员工编号"
20.           clearable
21.           @keyup.enter.native="handleQuery"
22.         />  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
23.         <el-input
24.           v-model="queryParams.personId"
25.           placeholder="请输入员工编号"
26.           clearable
27.           @keyup.enter.native="handleQuery"
28.         />        <el-input
29.           v-model="queryParams.personId"
30.           placeholder="请输入员工编号"
31.           clearable
32.           @keyup.enter.native="handleQuery"
33.         /></el-select>

复制代码

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

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

复制代码

替换，然后整体改成这样

1.         <el-input
2.           v-model="queryParams.personId"
3.           placeholder="请输入员工编号"
4.           clearable
5.           @keyup.enter.native="handleQuery"
6.         />        <el-input
7.           v-model="queryParams.personId"
8.           placeholder="请输入员工编号"
9.           clearable
10.           @keyup.enter.native="handleQuery"
11.         />        <el-input
12.           v-model="queryParams.personId"
13.           placeholder="请输入员工编号"
14.           clearable
15.           @keyup.enter.native="handleQuery"
16.         />        <el-input
17.           v-model="queryParams.personId"
18.           placeholder="请输入员工编号"
19.           clearable
20.           @keyup.enter.native="handleQuery"
21.         />      

复制代码

如下图：

这里面是这样，我们定义了一个变量 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 给赋值。

1.     getUserOPtionList() {      listUser(this.queryParams).then(response => {        <el-input
2.           v-model="queryParams.personId"
3.           placeholder="请输入员工编号"
4.           clearable
5.           @keyup.enter.native="handleQuery"
6.         />this.userOptionList = response.rows      });    },

复制代码

效果如图：

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

 

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

1. this.getUserOPtionList();

复制代码

如下：

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

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

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

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

1.         <el-input
2.           v-model="queryParams.personId"
3.           placeholder="请输入员工编号"
4.           clearable
5.           @keyup.enter.native="handleQuery"
6.         />        <el-input
7.           v-model="queryParams.personId"
8.           placeholder="请输入员工编号"
9.           clearable
10.           @keyup.enter.native="handleQuery"
11.         />        <el-input
12.           v-model="queryParams.personId"
13.           placeholder="请输入员工编号"
14.           clearable
15.           @keyup.enter.native="handleQuery"
16.         />        <el-input
17.           v-model="queryParams.personId"
18.           placeholder="请输入员工编号"
19.           clearable
20.           @keyup.enter.native="handleQuery"
21.         />        <el-input
22.           v-model="queryParams.personId"
23.           placeholder="请输入员工编号"
24.           clearable
25.           @keyup.enter.native="handleQuery"
26.         />        <el-input
27.           v-model="queryParams.personId"
28.           placeholder="请输入员工编号"
29.           clearable
30.           @keyup.enter.native="handleQuery"
31.         />

复制代码

如图：

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

1. editUserOptionList: [],

复制代码

如图：

好了，然后需要再编辑的时候对数据进行获取然后赋值。
找到 handleAdd 和 handleUpdate，粘贴如下代码：

1.       listUser().then(response => {        <el-input
2.           v-model="queryParams.personId"
3.           placeholder="请输入员工编号"
4.           clearable
5.           @keyup.enter.native="handleQuery"
6.         />this.editUserOptionList = response.rows      });

复制代码

如图：

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！