# SearchForm 搜索表单
当前业务中,搜索框出现频率极高,几乎和表格同时出现。很多时候多页面复用同一个搜索框,因此需要一套方案来管理搜索框,以便代码可以高效复用。`SearchForm`提供了配置化的表单创建方式。
## 表格信息
### 参数
| 参数 | 说明 | 默认值 |
| --------- | ---------------------------------------- | ------ |
| options | OptionSchema[] (必选) 表格核心配置 | 无 |
| immediate | Boolean 为true时会在初始化完毕后立即触发一次search事件,并且当options变化时仍然会触发 | false |
| loading | Boolean 搜索按钮的loading效果 | false |
| matcher | Function 用于匹配组件 | noop |
### OptionSchema
为了方便称呼,label、key、default、mapper、rules、toQuery、component这些称为表单配置项;props、attrs、on、nativeOn等等这些称为组件配置项。
实际上除表单配置项外全部为组件配置项,它们将作为第二个参数被传入createElement。
| 参数 | 说明 | 默认值 |
| --------- | ------------------------------------------------------------ | ------ |
| label | (必填)String|Object,为Object时,其结构也为OptionSchema,其他见备注 | 无 |
| key | (必填)String | false |
| default | (必填)当前字段的初始化值,如果为函数将会传入$route.query, 如果当前环境不存在$route则传一个空对象。这意味着你可以通过query来初始化。 | false |
| rules | async-validator的选项,支持校验,如果为一个函数,则直接视为validator函数 | 无 |
| mapper | Boolean|Function 表单数据formData的转化规则,如果返回对象则将其键值展开到最终的结果中。为false时对应的key值从结果中排除 | 无 |
| toQuery | Boolean|Function,表单数据同步至Url时的转化规则,为true时复用mapper。返回值中如果包含 undefined、null 或 '' 将会被忽略 | 无 |
| component | (必填)String|Function 详见下方:响应式与表单项联动 | 无 |
| props | 组件的props | 无 |
| attrs | 组件的attrs | 无 |
| on | 组件的on | 无 |
| nativeOn | 组件的nativeOn | 无 |
备注:
1. on & nativeOn:参数经过了特殊处理,每个函数的首个参数为setState函数,关于setState函数,下方有说明。其余参数依次取用即可。
主要是为了方便实现一些特殊情况下需要手动绑定函数来实现的表单联动。例如绑定change事件在切换标签后根据标签类型设置对应的默认值。
2. props & attrs:**props和attrs在内部会被合并,统一作为attrs**。建议使用时做到**全局统一**:即要用props就全用props,否则就全用attrs。
3. 由于除过表单配置项全部视为组件配置项,所以除了上面列出的组件配置项,还支持其他如class和style等等
其他参数参考[官方文档](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1)。
### 事件
| 事件名 | 参数 |
| ------ | ------------------------------------------------------------ |
| search | (result, formData): result是mapper转化后的数据,formData是原始数据 |
| reset | (formData): formData为重置后的默认数据。需要注意的是,reset实际上是一次调用OptionsSchema中的default函数并传入一个空对象 |
| change | (formData):最新的formData |
### 方法
组件提供了几个方法供给外部调用
- getResult、getFormData 获取对应的数据。
- reset:重置表单数据
- toQuery: 根据toQuery中配置的规则转化formData,并返回一个query对象
- setState:设置formData值,传入一个对象或返回对象的函数,函数接受原始formData作为参数。
- validate:校验formData,返回promise,校验成功resolve值为getResult()获取的最终值。
## 响应式和表单项联动
当组件的配置项是固定项时,可以将表单配置项和组件配置项写在一个层级,但如果组件的数据**涉及异步获取,或者表单项目之间存在联动效果**,需要将组件的配置项以函数的方式返回,这样才能正确更新。其中:
**当component选项为字符串的时候,读取同层级的组件配置项,并传递给该字符串对应的组件**。匹配方式如下:
1. 使用matcher匹配组件
3. 如果没有匹配到就直接返回component字符串
**当component选项为函数时,该表单项具备响应式、可以和其他表单项之间通过formData进行联动,轻松实现复杂交互**。其参数有三个
1. h:$createElement函数的引用
2. formData: 组件内部的数据
3. setState:函数,用来设置formData,传入一个对象或者函数,如果是函数,则该函数接受formData作为唯一参数,并返回一个对象。
component为函数时以返回值为准,忽略外部的组件配置项。你可以直接使用jsx返回VNode。也可以返回组件配置项,只不过当你返回组建配置项时,需要额外加上component选项,其值为string类型,指明需要渲染的组件。
## matcher
matcher用于匹配组件,如果matcher返回为空,则直接以name作为组件,否则以matcher返回的组件为准。
可以直接使用SearchForm组件,也可以使用插件的方式全局注册。
上面对input组件做了封装,添加了两个默认属性,placeholder和clearable。
没有合适的资源?快使用搜索试试~ 我知道了~
竞赛信息管理系统。管理员、教师、学生基本信息管理。对比赛记录,赛事信息的增删改查。并基于角色进行权限控制(RBAC).zip
共90个文件
vue:40个
js:23个
png:13个
需积分: 5 0 下载量 27 浏览量
2024-01-15
16:44:54
上传
评论
收藏 3.84MB ZIP 举报
温馨提示
大学生参加学科竞赛有着诸多好处,不仅有助于个人综合素质的提升,还能为未来职业发展奠定良好基础。以下是一些分析: 首先,学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛,学生不仅能够深入学习相关专业知识,还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野,使其对专业领域有更深刻的理解。在竞赛过程中,学生通常需要解决实际问题,这锻炼了他们独立思考和解决问题的能力。 其次,学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成,这促使学生学会有效地与他人合作、协调分工。在团队合作中,学生们能够学到如何有效沟通、共同制定目标和分工合作,这对于日后进入职场具有重要意义。 此外,学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面,要求参赛者具备全面的素质。在竞赛过程中,学生不仅需要展现自己的专业知识,还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外,学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台,学生有机会展现自己在专业领域的优势,得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要,有助于他们更加积极主动地投入学习和未来的职业生涯。 最后,学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点,还可以为进入理想的工作岗位提供有力的支持。
资源推荐
资源详情
资源评论
收起资源包目录
竞赛信息管理系统。管理员、教师、学生基本信息管理。对比赛记录,赛事信息的增删改查。并基于角色进行权限控制(RBAC).zip (90个子文件)
ABC-code
.editorconfig 121B
.browserslistrc 30B
babel.config.js 76B
.eslintrc.js 892B
files
登录界面.png 218KB
架构图.png 118KB
权限列表.png 346KB
教师列表.png 326KB
用户导入.png 350KB
角色列表.png 465KB
参赛记录.png 325KB
编辑权限.png 317KB
授权.png 268KB
赛事列表.png 460KB
角色编辑.png 440KB
学生列表.png 402KB
src
pages
race
Record.vue 6KB
Race.vue 8KB
role
RoleList.vue 5KB
PermissionList.vue 5KB
user
Teacher.vue 9KB
Student.vue 9KB
Login.vue 415B
App.vue 1KB
plugins
form.js 2KB
drawer.js 283B
index.js 536B
confirm.js 1KB
store
index.js 1009B
assets
bg.svg 9KB
tool
DelPopConfirm.vue 516B
index.js 124B
form
helpers.js 1KB
SearchForm.vue 2KB
content.js 199B
ConfigForm.vue 9KB
index.js 711B
label.js 395B
README.md 6KB
main.js 509B
api
axios.js 612B
index.js 2KB
utils
qiniu.js 334B
excel.js 1KB
const.js 1KB
helpers
importuser-columns.js 1KB
style
variables.styl 408B
mixins.styl 1KB
reset.styl 44B
components
record
AddRecord.vue 2KB
ShowRecordDetail.vue 6KB
RecordAction.vue 3KB
AuditRecord.vue 2KB
race
Detail.vue 1KB
RaceDetail.vue 1KB
AntTable.vue 2KB
Drawer.vue 2KB
common
UserImport.vue 6KB
Loading.vue 2KB
DisplayFailedUser.vue 1KB
UpdatePassword.vue 3KB
ContextMenu.vue 2KB
404.vue 374B
LoginState.vue 3KB
UserLogin.vue 4KB
GrantRole.vue 2KB
Upload.vue 5KB
ColumnSetting.vue 3KB
edit
edit-mixin.js 844B
EditTeacher.vue 2KB
EditStudent.vue 2KB
EditRole.vue 2KB
EditPermission.vue 2KB
EditRace.vue 3KB
transition
PageToggleTransition.vue 232B
router
index.js 3KB
layouts
TabLayout.vue 6KB
GlobalLayout.vue 3KB
common
Sidebar.vue 3KB
Header.vue 555B
permission.js 2KB
jsconfig.json 307B
package.json 2KB
public
logo.png 324KB
favicon.ico 4KB
index.html 3KB
package-lock.json 545KB
vue.config.js 1KB
.gitignore 214B
README.md 3KB
共 90 条
- 1
资源评论
普通的一个普通猿
- 粉丝: 1462
- 资源: 1761
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功