需求：父组件给 JSelect 传参数，自动塞进下拉搜索框、默认选中 / 回填
一、核心原理
JSelect 本质封装了 a-select，支持：
v-model绑定选中值defaultKeyword绑定搜索框默认关键词- 父组件用
props传参，子组件接收赋值给defaultKeyword/v-model
二、场景 1：外部传「搜索关键词」塞进搜索框
子组件 JSelect 写法
<template>
<!--
defaultKeyword：搜索框默认文字
showSearch：开启搜索
-->
<JSelect
v-model="selectValue"
:defaultKeyword="searchKey"
showSearch
placeholder="请选择"
dict-code="sys_user,realname,id"
/>
</template>
<script setup>
import { ref } from 'vue'
// 接收父组件外部传入参数
const props = defineProps({
// 外部传入要塞进搜索框的关键词
outerSearchKey: {
type: String,
default: ''
}
})
// 绑定搜索框关键词
const searchKey = ref(props.outerSearchKey)
const selectValue = ref('')
</script>
父组件调用 传参
<ChildComponent :outer-search-key="张三" />效果：打开页面，JSelect 搜索框自动填入「张三」
三、场景 2：外部传 ID，自动选中 + 搜索框回填名称
最常用：外面传 ID，JSelect 自动匹配字典、回填显示名、搜索框也带出文字
子组件
<template>
<JSelect
v-model="selectId"
showSearch
placeholder="请选择用户"
dict-code="sys_user,realname,id"
/>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
// 外部传入选中ID
outerId: {
type: String,
default: ''
}
})
const selectId = ref('')
// 监听外部参数变化，赋值给下拉框
watch(() => props.outerId, (val) => {
if(val){
selectId.value = val
}
}, { immediate: true })
</script>父组件调用
<ChildComponent :outer-id="10001" />效果：
- 自动选中 id=10001 的用户
- 搜索框自动显示对应的
realname名称
四、场景 3：页面内部自己赋值（非父子传参）
如果是同一个页面，按钮点击后把参数塞进 JSelect 搜索框：
<template>
<JSelect
v-model="value"
:defaultKeyword="keyword"
showSearch
dict-code="sys_depart,depart_name,id"
/>
<a-button @click="setSearch">带入搜索参数</a-button>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
const keyword = ref('')
const setSearch = () => {
// 外部参数直接赋值给 keyword 就会塞进搜索框
keyword.value = '研发部'
}
</script>五、关键知识点总结
- 控制搜索框文字 → 用
defaultKeyword属性 - 控制下拉选中值 → 用
v-model - 外部父组件传参 →
defineProps接收 +watch监听赋值 - 加
showSearch才会显示搜索输入框，不加搜素框出不来
六、你直接套用的最简模板
你只要改 dict-code 和字段名就能用：
<JSelect
v-model="form.xxxId"
:defaultKeyword="searchKey"
showSearch
placeholder="请选择"
dict-code="你的字典编码"
/>备注：
还有一种是传递params参数就可以了，加到他的searchInfo里面
data.ts如下：
{
label: '职务',
field: 'post',
required: false,
component: 'JSelectPosition',
componentProps: ({ formModel }) => {
const workNo = formModel.workNo;
const sex = formModel.sex;
// 如果workNo为空,禁用组件
const isDisabled = !workNo;
// 构建 params 对象,只传递有值的参数
const params: any = {};
if (workNo) params.workNo = workNo;
// sex是数组,需要转换为逗号分隔的字符串
if (sex && Array.isArray(sex) && sex.length > 0) {
params.sex = sex.join(',');
}
return {
labelKey: 'name',
params,
disabled: isDisabled,
onChange: (value, options) => {
// 当选择职务后，回显职务名称和职务等级
if (options && options.length > 0) {
const firstOption = options[0]; // 如果是多选，取第一个
const rowData = firstOption.row || {}; // 获取完整的行数据
formModel.workName = rowData.name || '';
formModel.postRank_dictText = rowData.postRank_dictText || '';
} else {
// 清空时也要清空这两个字段
formModel.workName = '';
formModel.postRank_dictText = '';
}
},
};
},
},JSelectPosition组件如下：
//下发 params（作为 searchInfo），供 useSelectBiz 使用
provide('searchInfo', computed(() => props.params));
//把组件传过来的 props 属性 + 原生 attrs 属性，自动合并成一个全新对象，并且是响应式监听、自动更新 **
const getBindValue = computed(() => Object.assign({}, unref(props), unref(attrs)));useSelectBiz.ts：
// 接收 searchInfo（如果有的话）
const searchInfo = inject<Ref<any>>('searchInfo', ref({}));
// 合并 searchInfo 参数
params = { ...unref(searchInfo), ...params };Webfunny 全链路监控埋点平台 是一站式前端监控 + 用户行为埋点 + 大数据分析平台，天然适配点位细查、用户行为回溯、批量导出等场景：
一体化架构：监控 + 埋点同一套 SDK，数据互通无壁垒
私有化部署：数据完全本地化，满足企业合规要求
高吞吐支撑：基于 ClickHouse 构建，亿级日志秒级查询
全端覆盖：H5 / 小程序 / APP / 鸿蒙全覆盖，统一导出口径
可定制强：支持接口扩展、分布式锁、限流降级等企业级能力
