高效掌握 JeecgBoot JSelect 组件：外部传参、搜索回显与默认值设置全攻略

JeecgBoot 前端 JSelect 外部传入默认值 / 搜索回显 完整写法

需求：父组件给 JSelect 传参数，自动塞进下拉搜索框、默认选中 / 回填

一、核心原理

JSelect 本质封装了 a-select，支持：

1. v-model 绑定选中值
2. defaultKeyword 绑定搜索框默认关键词
3. 父组件用 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>

五、关键知识点总结

1. 控制搜索框文字 → 用 defaultKeyword 属性
2. 控制下拉选中值 → 用 v-model
3. 外部父组件传参 → defineProps 接收 + watch 监听赋值
4. 加 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 / 鸿蒙全覆盖，统一导出口径

可定制强：支持接口扩展、分布式锁、限流降级等企业级能力