UI标签库专题十一 JEECG智能开发平台 DictSelect 数据字典下拉选择框

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               


1.  DictSelect (数据字典下拉选择框)

1.1.  参数

属性名

类型

描述

是否必须

默认值

typeGroupCode

string

字典分组编码

null

field

string

对应表单

null

id

string

唯一标识

null

title

string

显示文本

null

defaultVal

string

默认值

null

divClass

string

DIV框默认样式

form

labelClass

string

LABEL默认样式

Validform_label

dictTable

string

自定义字典表

null

dictField

string

自定义字典表的匹配字段-字典的编码值

null

dictText

string

自定义字典表的显示文本-字典的显示值

null

1.2.   用法

<t:dictSelect field="name" typeGroupCode="process" title="流程类型"></t:dictSelect>     

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
这里写图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,根据你的需求描述,我来为你提供一个 Vue3 + Element Plus + TypeScript 的数据字典下拉选择组件的示例代码,希望能对你有所帮助。 ```vue <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" /> </el-select> </template> <script lang="ts"> import { defineComponent } from 'vue' import { ElSelect, ElOption } from 'element-plus' import { getDictOptions, DictOption } from '@/api/dict' export default defineComponent({ name: 'DictSelect', components: { ElSelect, ElOption }, props: { dicCode: { type: String, required: true }, value: { type: String, default: '' } }, data() { return { options: [] as DictOption[] } }, watch: { dicCode: { immediate: true, handler(val: string) { this.loadOptions(val) } } }, methods: { async loadOptions(dicCode: string): Promise<void> { const result = await getDictOptions(dicCode) this.options = result.data } } }) </script> <style scoped> </style> ``` 在这个示例代码中,我们定义了一个名为 `DictSelect` 的组件,其中包含了一个 el-select 和若干个 el-option 组件,用于展示数据字典的选项。组件中,我们使用了 Element Plus 提供的 el-select 和 el-option 组件,以及 Vue3 中的 `defineComponent` 函数来定义组件。 在组件的 props 中,我们定义了一个必选的 `dicCode` 属性,用于指定数据字典的编码;以及一个可选的 `value` 属性,用于指定选中的值。在组件的 data 中,我们定义了一个 `options` 数组,用于存储数据字典的选项。 组件中的 `loadOptions` 方法用于加载数据字典的选项,它接受一个 `dicCode` 参数,用于指定数据字典的编码。在这个方法中,我们调用了一个名为 `getDictOptions` 的 API 接口,该接口用于获取指定数据字典的选项。在接口返回结果后,我们将选项数组保存到组件的 data 中。 最后,在组件中,我们使用了一个 watch 来监听 `dicCode` 属性的变化,当 `dicCode` 的值发生变化时,我们自动调用 `loadOptions` 方法来加载数据字典的选项。在 el-select 中,我们使用了 `v-model` 来绑定选中的值。当用户选择了一个选项后,组件会自动将选中的值存储到组件的 data 中,并触发一个 `input` 事件来通知父组件更新绑定的值。 使用这个组件时,你可以在父组件中引入它,并传入一个 `dicCode` 值来展示对应的数据字典,例如: ```vue <template> <DictSelect v-model="selectedValue" dicCode="gender" /> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import DictSelect from '@/components/DictSelect.vue' export default defineComponent({ name: 'Example', components: { DictSelect }, setup() { const selectedValue = ref('') // 选中的值 return { selectedValue } } }) </script> <style scoped> </style> ``` 在这个示例代码中,我们在父组件中引入了 `DictSelect` 组件,并传入了一个 `dicCode` 值为 `gender`。我们还使用了 `v-model` 来双向绑定选中的值,并将其保存在 `selectedValue` 变量中。当用户选择了一个选项后,`selectedValue` 的值会自动更新,当再次打开页面时,`selectedValue` 的值会自动回显。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值