vebn的BasicForm和a-select的下拉选择模糊搜索

已于 2023-11-07 17:14:33 修改
阅读量864 收藏 1
点赞数 1
文章标签： vue anti-design-vue
于 2023-11-07 17:10:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chenmomo_csdn/article/details/134271067
版权
本文介绍了如何在VBen框架中使用BasicForm组件来控制数据，以及如何通过API集成a-select组件进行搜索。作者分享了如何从schemas数据中获取和操作特定数据，以及如何通过`componentProps`实现组件的props控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言：固定的api了解即可，写过一次就可以掌握。

BasicForm

首先我们使用BasicForm组件，这个是vben自带的，我们只需要控制数据即可，在schemas数据里，对于想控制的那一个数据，进行单独的处理。

我这里是把schemas的数据维护在另一个txs文件里，然后我只需要在数据里找到相对应的数据，然后进行控制单独的一条数据就好了，通过componentProps控制数据所渲染的组件的 props，控制showSearch为true,filterOption是我写的一个js搜素，仅供参考

a-select

a-select是and的组件，这个也是调用相对的api即可，分别是引入，注册，，使用。

引入组件注册

使用

然后就可以搜索了

效果图奉上

结束语：有错请指点，有问题多多包涵，仅供参考，记录日迹

FUADIM / VBEN 三级联动下拉框的一种方案
2201_75765221的博客
06-13 513
qs = MachineData.objects.filter(pid=0),Null不等于0。3.前端datats文件,利用formModle,表单的双向绑定对象，这个值是响应式的。verbose_name = '自关联数据'# 输出第2第3级API接口，GET参数为上一级的ID。# 输出第一级别，PID=0的类别。2. 后端API接口2个。
Vue中使用Select选择器拼接label的方法
zhf_123666的博客
11-09 892
Vue中使用Select选择器拼接label的方法_Geek-Haoyu-优快云博客 <el-form-item label="货道商品" prop="productid"> <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect"> <el-option v-for...
vue3 vben table form 使用
weixin_45924208的博客
10-19 681
【代码】vue3 vben的使用。
vben admin ApiSelect和ApiTreeSelect组件开启按label字段搜索功能
xihadddd的博客
03-19 1878
近期工作需要用到vben admin ApiSelect组件开启搜索功能，开启后搜索条件是按照value搜索的，在文档找了好久没找到按label搜索，从baidu换了好多搜索条件终于找到了，都准备自己写插槽了。
vben admin下拉框（类型为：select）获取后台数据（带搜索）
热门推荐
qq_44774287的博客
08-30 1万+
vben admin下拉框（类型为：select）获取后台数据
vben框架使用ApiSelect组件搜索功能不准问题解决
dqpcsdn_0208的博客
07-19 826
vben框架使用ApiSelect组件搜索功能不准问题解决
Vben Admin ApiSelect组件搜索后台数据获取Select选项
dont_curry的博客
11-17 5071
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。vben 中包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。
可输入的下拉框
m0_63026408的博客
08-31 1437
可以输入的下拉框，在element-ui中 可以找到的是 input 组件 中-带输入建议 的可以达到效果当是下拉框时，匹配输入的值与下拉框的数据，如果可以匹配，那么就选择那条，如果不能匹配那么，保留输入的值。
laravel-admin form表单控件篇——apiSelect（api查询结果作为选项）
qq_38421226的博客
02-03 2350
一、效果展示 二、使用说明 （1）下载资源：apiSelect控件 （2）下载资源后，放置到项目指定目录中（app/Admin/Extensions/Form），然后在app/Admin/bootstrap.php文件中注册 Form::extend('apiSelect', \App\Admin\Extensions\Form\ApiSelect\ApiSelect::class); （3）接下来可以像form表的的其他控件一样使用 第一种：无默认选项，直接通过api查询。 ..
jeecg-boot只选择年份但是不显示
weixin_42609363的博客
05-17 1264
代码： <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="年"> <a-date-picker placeholder="请选择年" mode="year" v-model="queryParam.year" :open="dat
Ant Design Vue(antd)中FormModel表单验证功能（坑与填坑）
风のように.的博客
08-24 6555
Ant Design Vue中的FormModel组件 可以再官方文档里面找到表单验证的使用方法 下面是我的具体的代码（会导致错误的代码）： html代码 <a-form-model-item label="Group" prop="group"> <a-select v-model="basicForm.selectedgroup" placeholder="please select the group"> 我的表单数据和自定义的校验规则： basicForm
vben <BasicForm>嵌套动态BasicForm
11-27
vben是一个Vue.js生态下的UI组件库，其中`<BasicForm>`通常是指基础表单组件。当你需要在Vuetify或类似的框架中创建复杂的表单结构时，可能会遇到嵌套使用`<BasicForm>`的情况。这种设计允许你在一个表单内部嵌套另...
vben admin BasicModal和BasicForm的使用
lipenghao111的博客
06-26 2829
showActionButtonGroup: false, //是否显示 重置 查询按钮。向表单内所有组件传递 size 参数,自定义组件需自行实现 size 接收。labelWidth: 80, // 前面间距。5.setModalProps:设置弹出框的某些属性。2.在template里面使用BasicForm标签。1.register:BasicModal的配置项。2.在需要的页面引入BasicModal。1. 引入BasicForm。6.data:为接受的参数。2.title:标题。
Vben admin 中 ApiSelect 类型的用法
佛系女程序员！
07-10 1325
Vben admin 中 ApiSelect 类型的用法
bootstrap-select实现select标签具备搜索功能
Peacock__的博客
11-28 2295
项目开发中遇到select标签具备搜索功能的需求，找了挺多方法，最后用bootstrap-select实现的，很简单。 以下为实现方式，简单记录下。 1、引入相关js和css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.12/dist/css/bootstrap-sel...
Vben Admin / Fuadmin 下拉搜索动态更新
2201_75765221的博客
06-17 656
可以调用后端API，进行模糊搜索，更新下来框；
form表单必填字段校验
weixin_45293780的博客
09-17 881
校验港澳台身份证 // An highlighted block <template> <div> <el-form :rules="rules"> <el-form-item label="身份证号：" prop="identityCard"> <el-input v-model="formInline.identityCard" placeholder="请输入身份证号"
vue3：三级联动
qq_36619440的博客
10-21 1439
自学，vue3、省市区三级联动
veben----- BasicForm如何生成
zimu_spm的博客
08-30 1219
针对Vue-Vben-Admin 后台解决方案进行逻辑梳理和组件分析
vben
最新发布
06-02
### Vben Admin 或 Vben 前端框架的相关信息 Vben Admin 是一个基于 Vue 3 的现代化中台/后台管理系统模板，它采用了最新的前端技术栈，包括 Vue 3、Vite 4 和 TypeScript 等[^1]。该框架不仅提供了生产就绪的解决方案，还为开发者学习现代前端技术提供了绝佳的平台。 #### 技术特点 Vben Admin 的核心优势在于其技术栈的选择和功能的丰富性。以下是其主要特点： - **Vue 3**：作为核心框架，Vue 3 提供了更高效的响应式系统和更好的性能[^1]。 - **Vite 4**：作为构建工具，Vite 提供了快速的开发服务器启动时间和按需加载的能力[^1]。 - **TypeScript**：增强了代码的类型安全性，使项目更加健壮[^1]。 #### 功能模块 Vben Admin 提供了丰富的功能模块，涵盖了从用户登录到权限管理的完整流程[^2]。以下是一些关键功能： - **登录逻辑**：支持对接后端接口进行用户认证，包括 `login` 和 `getUserInfo` 接口的集成[^2]。 - **权限管理**：支持前端和后端两种控制方式，允许开发者根据需求选择合适的权限管理策略[^2]。 - **动态路由**：支持从后端获取路由和菜单配置，实现灵活的页面导航[^2]。 #### 安装与配置 为了使用 Vben Admin，开发者需要按照以下步骤进行操作[^3]： 1. 克隆代码仓库： ```bash git clone https://github.com/vbenjs/vue-vben-admin.git ``` 2. 安装依赖： 注意，该项目仅支持使用 `pnpm` 进行依赖安装。 ```bash pnpm install ``` #### 学习资源 对于初学者，可以参考官方文档和教程，逐步了解项目的结构和功能实现[^2]。例如： - **初次运行**：了解如何启动项目并查看基础界面。 - **登录逻辑梳理**：学习如何实现用户登录和身份验证[^2]。 - **权限管理**：掌握前后端权限控制的方式[^2]。 ### 示例代码 以下是一个简单的示例，展示如何在 Vben Admin 中配置 API 请求拦截器： ```javascript import { createHttp } from '/@/utils/http/axios'; const http = createHttp({ timeout: 10000, headers: { 'Content-Type': 'application/json' }, }); http.interceptors.request.use((config) => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值