从 PHP 到 AI + Golang，程序员自救转型手记（四十五）：前端远程下拉输入组件

这是一个系列 Blog，作者将以一个 PHP 全栈工程师的身份，利用 AI 工具（claude code、codex、deepseek、豆包等）：从零开始学习 golang 语言，并最终完成 ai-go-admin（github | gitee）开源项目的制作，全程记录分享。

在上一期，我们进行了 "管理员账号管理"，本期将完成：前端远程下拉输入组件

前端远程下拉输入组件

上一章我们完成了 管理员账号管理，之后我们则需要制作 权限规则管理 功能。

管理员账号管理 提供了 list 接口，这为我们做 远程下拉组件 提供了一个测试用的数据源。

且后续要制作的 权限规则管理，存在上下级关系，即上级规则可能是另外一个权限规则，这时候就需要用上 远程下拉组件 了，此时来实现它正合适，作为一个全栈工程师，前后端随意切换是基本功。

移植自 BuildAdmin

老规矩，前端继续从 BuildAdmin 啃老（老不是指技术栈哈，前端技术栈是 vue3 全家桶），这个组件我并没有让 AI 直接完成移植，因为这种大组件 AI 很容易上来就一通瞎改，让我本来能好好运行的组件变得乱七八糟。

最终直接复制组件代码后，全人工完成移植工作，在这里不提整理过程，而是描述一下组件的规划和实现。

数据请求函数

既然名叫 远程下拉，首先它是个下拉菜单，其次下拉的数据来自远程（通过 API 获取），这里首先建立一个请求函数：

ts 复制代码

export function selectList(listURL: string, data: AnyObj = {}) {
    return request({
        url: listURL,
        method: 'POST',
        data,
    })
}

listURL 和 data 都由远程下拉组件内部传递，虽然是获取数据，但请求方法是 POST，因为 list 需要接受 字段筛选、排序 等很多数据，有时 GET 不够用，就只能妥协一下语义了。

listURL ：就是后台 任意功能 的 list 接口地址，比如管理员管理的 /admin/auth/admin/list，所以只要是后台已有的管理功能，都可以和远程下拉组件无缝契合。

data ：同上，我们可以在请求 list 接口时，传递 排序、筛选条件、页面 等数据，受益于该接口原设计为表格提供服务，天然支持这些入参。

下拉面板

el-select 组件本身也支持从远程 API 获取数据，但是它需要输入搜索关键词后，才展示下拉面板，而我们的组件是聚焦后就立即显示第一页内容，你可以直接选择而无需先搜索。

顺便实现的，聚焦时面板上就会显示的 无数据提醒 也非常实用，由于我们总是会加载第一页，那么无数据的话，就能直接显示出来了。

分页

我们在 el-select 的基础上额外加了一个分页功能，在下拉面板上可以直接切页，对于数据量不大的接口，这非常有用。

开发者还可以通过 remoteParams 属性，自定义当前页码、每页条数等。

选项优化

首先是支持传递一个 labelFormatter，用于在获取到选项之后，对每个选项进行一次格式化。

默认情况下可以只设置 value 和 label 字段，通过此选项，你可以将 label 格式化为：小明（ID：1）188888888888 这种自定义格式，支持显示多字段等。

最后的终极大招，tooltipParams 属性，可以定义一个键值对，键是 key，值是 label，内部将使用 el-tooltip 渲染出这些字段，如下：

vue 复制代码

<RemoteSelect
    v-model="test"
    remote-url="/admin/auth/admin/list"
    field="nickname"
    :tooltip-params="{
        id: 'ID',
        nickname: '昵称',
        username: '用户名',
        mobile: '手机号',
    }"
></RemoteSelect>

值得一提的是，BuildAdmin 的 tooltipParams 是反过来的，键是 label，值是 key，其实中文 key 非常丑，但这只是一个细节问题，而且如果修改就是一个不兼容更新（这段代码是由社区小伙伴提交的 PR，审核时没考虑到写法美观问题）。

其他细节

远程下拉算是一个比较大的组件，额外还有很多细节，比如：

按下 ESC 键 时不能和 el-dialog 冲突（不能关闭 el-dialog，需要关闭下拉面板）
两个参数一样的远程下拉组件出现在一起，它们会同时发起初始化请求，可能会触发重复请求取消的问题
远程下拉被滑出屏幕，下拉面板依旧显示的问题
......