前言:本文章是vue中因为公司的项目页面牵扯到大量的表单,从而诞生,组件的源代码我会放到文章最后,文章写的可能不好,但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率,有问题可以及时探讨QQ:1582340991
功能
提交校验,输入文本框校验,单个禁用,全局禁用,日期的区间选择,下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏,远程搜索框,插槽
使用示例小demo
vue页面的配置
参数 | 释义 |
---|---|
data | 获取参数值 |
fields | 动态配置表单js |
ref | 表单校验 |
all-disabled | 全局表单输入框禁用 |
提交时间我也加入里面了,提交就可以校验
<template>
<div>
<wti-form :data="originData"
:fields="fields"
ref="form_one"
:all-disabled="IsSuccess"
class="wti-form-style"/>
<el-button type="primary" plain @click="submitForm">提交</el-button>
</div>
</template>
<script>
import wtiForm from '@/components/wti_form';
import fields from './form.js';
export default {
name: 'ProjectCreateAdd',
components: {
wtiForm
},
data () {
return {
IsSuccess: false,// 全局禁用
fields, // 基础信息
originData: {
a1: '',
}
};
},
methods: {
refPromise (form) {
return new Promise(resolve => {
form.validate(v => {
resolve(v);
});
});
},
submitForm () {
this.refPromise(this.$refs.form_one)
.then(res => {
if (res) {
console.log(this.originData,'提交的表单');
}else{
this.$message.error('请完善表单信息');
}
});
}
}
};
</script>
<style scoped lang="less">
</style>
form.js
动态表单配置
这个js就是一个最简单常见的输入框配置,简单看一下,下面我就会详细介绍
const fields = [
{
children: [
{
label: '姓名',
type: 'input',
key: 'a1',
size: 6,
prop: 'isPublic',
rules: [
{
required: true,
message: '请输入姓名',
trigger: [ 'change', 'blur' ],
},
],
disabled: {
self: false,
values: [],
},
},
],
},
];
export default fields;
效果:
动态表单配置
这里分为公共和私有的,公共的就是所有的配置项都也可以用,私用的就只能特殊的使用,比如options数组select能用,input就用不了,以上面的js为例,fields是所有的配置,是个数组,每个对象是一行,children是每一行,里面的对象则是每个单独的表单项,输入框的placeholder已经集成在组件,所以可以不用写
参数 | 释义 | 是否必填 |
---|---|---|
label | 单个输入表单的名字 | true |
type | 对应的输入框,参数是input,select等等 | true |
key | 这个值就是data中要绑定的参数 | true |
size | 用的是elementui中的布局格式,一共24份,我这里一般是四列,所以我的参数是6.两列就是12 | true |
prop | 和key值一样即可 | false |
rules | 校验,支持element的校验规则配置 | false |
disabled | 是否禁用,默认为不禁用,禁用{ self: false, values: [],} | false |
options | 下拉,多选,单选配置,里面有label,value | false |
placeholder | 文本框的提示语句,默认请输入+label,也支持自定义 | false |
isShow | 一般和有options的配置单使用,有两个参数{ key: ,values: [], } key是控制有isShow配置的表单,谁控制他填写谁的key,和options中的某一个values作为控制条件 | false |
pickerOptions | 控制日期的区间的选择,太绕,我会在底下写上示例,比文字明白,上面那个也一样 | false |
percentTex | input的单位参数 | false |
inputType | 给input里面加入参数值number,可以给数字添加千分号 | false |
1.普通输入框–input
配置:
{
label: '姓名',
type: 'input',
key: 'a1',
size: 6,
prop: 'isPublic',
rules: [
{
required: true,
message: '请输入姓名',
trigger: [ 'change', 'blur' ],
},
],
disabled: {
self: false,
values: [],
},
percentTex:'万元'
},
效果
1.1. 金额+千分号的input
配置:
{
label: '金额',
type: 'input',
inputType: 'number',
key: 'a2',
size: 6,
prop: 'isPublic',
rules: [
{
required: true,
message: '请输入金额',
trigger: [ 'change', 'blur' ]
}
],
disabled: {
self: false,
values: []
},
percentTex: '万元'
}
效果
2.下拉框–select
配置:
{
label: '性别',
type: 'select',
key: 'a3',
size: 6,
prop: 'isPublic',
rules: [
{
required: true,
message: '请选择性别',
trigger: [ 'change', 'blur' ]
}
],
options: [
{
label: '男',
value: '0',
},
{
label: '女',
value: '1',
},
],
disabled: {
self: false,
values: []
},
}
效果
2.1.下拉框的选项控制别的表单的显示隐藏
配置:
{
label: '金额',
type: 'input',
inputType: 'number',
key: 'a2',
size: 6,
prop: 'isPublic',
rules: [
{
required: true,
message: '请输入金额',
trigger: [ 'change', 'blur' ]
}
],
disabled: {
self: false,
values: []
},
isShow:{ // 注意这两行,就是被控制项的配置
key:'a3',
values:[ '0' ]
},
percentTex: '万元'
},
效果:只有显示男的时候金额显示,其他的不显示
3.左右布局,单选—input-long
注释:页面统一左右布局的话,只需要在公共组件里面修改label-positio属性即可,入参和ElementUi同理
配置:
{
label: '是否公共账户',
type: 'input-long',
key: 'a1',
size: 6,
prop: 'a1',
customLayout: 'left',
rules: [
{
required: true,
message: '请选择是否公共账户',
trigger: [ 'change', 'blur' ],
},
],
options: [
{
label: '是',
value: '1',
},
{
label: '否',
value: '0',
},
],
disabled: {
self: false,
values: [],
},
},
效果
4.下拉搜索框—select-search
注:使用组件的页面要bind,然后在meath写入你的请求方法即可
配置:
data () {
fields[0].children[0].remoteMethod = this.remoteMethod(this).bind(fields[0].children[0]);
},
methods: {
// 模糊查询
remoteMethod ($this) {
return function (query) {
this.loading = true;
$this.$ajax.queryProjectByProjectInfo({ likeProjectID: query }).then((res) => {
const { code, msg, data } = res;
if (code === 200) {
this.options = data.map(item => ({
label: `${item.projectID}(${item.projectName})`,
value: item.projectID
}));
} else {
$this.$message.error(msg);
}
}).catch(err => {
console.log('项目代码接口报错:', err);
$this.$message.error('服务器错误,请联系管理员');
}).finally(() => {
this.loading = false;
});
};
},
}
配置
{
label: '信托项目代码',
type: 'select-search',
loading: false, // 加载中
remoteMethod: null, // fields[0].children[0].remoteMethod就是这个,我是fields第零个和children第零个的位置
options: [],
key: 'projectId',
size: 6,
prop: 'projectId',
rules: [
{
required: true,
message: '请输入信托项目代码',
trigger: [ 'change', 'blur' ],
},
],
placeholder: '请输入',
},
效果:
5. 文本域
注:sizeNumber为字符长度
配置:
{
label: '备注信息',
type: 'autosize',
key: 'remarks',
size: 12,
prop: 'remarks',
sizeNumber: '200',
rules: [
{
required: false,
message: '请输入交易结构',
trigger: [ 'change', 'blur' ],
},
],
},
效果:
6.选择日期开始(年月日)–datetime2
配置:
{
label: '开户日期',
type: 'datetime',
key: 'a1',
size: 6,
prop: 'a1',
rules: [
{
required: true,
message: '请选择开户日期',
trigger: [ 'change', 'blur' ],
},
],
placeholder: '请选择',
disabled: {
self: false,
values: [],
},
},
效果:
6.1 选择日期开始(年月日时分秒)–datetime2
配置:
{
label: ‘开户日期’,
type: ‘datetime2’,
key: ‘a1’,
size: 6,
prop: ‘a1’,
rules: [
{
required: true,
message: ‘请选择开户日期’,
trigger: [ ‘change’, ‘blur’ ],
},
],
placeholder: ‘请选择’,
disabled: {
self: false,
values: [],
},
},
效果:
6.2 选择器的特殊状态
注:pickerOptions属性key为max写入比自己大的区间参数key即可,key为min则相反,时分秒的同样适用
配置:
{
label: '开户日期',
type: 'datetime',
key: 'a1',
size: 6,
prop: 'a1',
rules: [
{
required: true,
message: '请选择开户日期',
trigger: [ 'change', 'blur' ],
},
],
placeholder: '请选择',
disabled: {
self: false,
values: [],
},
},
{
label: '销户日期',
type: 'datetime',
key: 'a2',
size: 6,
prop: 'a2',
rules: [
{
required: true,
message: '请选择销户日期',
trigger: [ 'change', 'blur' ],
},
],
placeholder: '请选择',
disabled: {
self: false,
values: [],
},
pickerOptions: {
max: 'a1', // a1日期之后
},
// pickerOptions: {
// min: 'a1', // a1日期之前
// },
// pickerOptions: {
// before: true // 当前日期之后
// },
// pickerOptions: { // // 当前日期之前
// after: true
// },
}
效果:
max时
min时
5.联级选择器
提取:
链接:https://pan.baidu.com/s/1HKwZYOi0dfF39g9VHSyiEA
提取码:brp0
累了,太多了,等我后续更新
未完待续…