前言：本文章是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
累了，太多了，等我后续更新
未完待续…
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
