ruoyi-vue列表搜索姓名从文本框改为下拉框
我们做好了列表功能后，发现这里的搜索不够智能，这里是文本搜索的，为了更友好，应该是下拉选择。由于下拉框我们可以在用户的状态那边去找个例子，所以这里我们可以这样做，找到 ruoyi-ui/src/views/system/user/index.vue 文件，里面的这里的代码
我们拷贝如下代码
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/><el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/><el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/></el-select>然后来到 ruoyi-ui/src/views/system/salary/index.vue 这里，找到员工编号搜索这里，将这里的内容从
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/>替换，然后整体改成这样
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> 如下图：
这里面是这样，我们定义了一个变量 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 => { <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/>this.userOptionList = response.rows }); },效果如图：
然后，我们来到页面上面刷新，发现下拉框出现了，但是没值。
原来是我们忘记给它在初始化的时候加载了，那么我们改改这里的代码。
给 created 方法增加一行
this.getUserOPtionList();如下：
然后我们再刷新页面，可以看到下拉列表有了，那么我们试试搜索看看。
好了，这说明这个功能做的不错，但是我注意到，这个修改里面还是不对。
那么我们再将修改这里如法炮制，也改一下。
找到这里
然后将刚刚的修改也换一下，换成这样
<el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/> <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/>如图：
然后我们这里注意的是，需要定义不同的变量叫 editUserOptionList，然后v-model这里也要写 form.personId，好了，下面是js进行绑定变量。
editUserOptionList: [],如图：
好了，然后需要再编辑的时候对数据进行获取然后赋值。
找到 handleAdd 和 handleUpdate，粘贴如下代码：
listUser().then(response => { <el-input
v-model="queryParams.personId"
placeholder="请输入员工编号"
clearable
@keyup.enter.native="handleQuery"
/>this.editUserOptionList = response.rows });如图：
然后我们刷新页面或者你不成功的话，ctrl+c暂停前端服务，重新 npm run dev 将服务开起来，然后我们看看效果。
好啦，现在我们实现了列表页面用户姓名的一个下拉框的关联，使其使用起来更加方便，而且方便新增和修改。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]