GformCreator下
{this.$slots.default ? this.$slots.default :(
<div>
<el-button type="primary" onClick={ e => this.doSubmit() } > 提交 </el-button>
<el-button onClick={ e => this.reset() } > 重置</el-button>
</div>
)}
两个事件，一个是提交事件doSubmit，一个是reset事件。
doSubmit() {
}
create.vue下
submit绑定doSubmit方法，绑定子组件
<GformCreator @submit = "doSubmit" />
doSubmit(data) {
console.log('提交事件触发',data
)}
GformCreator下
doSubmit() {
let { submit } = this.$listeners;
console.log(submit)
}
或者
this.$emit('submit',''数据2222)
两种组件间通信方式：一种是 e m i t , 一种是 emit,一种是 emit,一种是listener绑定很多东西，可以取
renderItem(item) {
switch(item.type) {
case 'input':
case 'password':
case 'textarea':
return <el-input type={item.type} > </el-input>
}}
把字段绑定在form上
data() {
return {
form: {}
}
}
created() {
const {items} = this.conf;
items.forEach(rowArr => {
rowArr.forEach(item => {
this.$set(this.form,item.key,item.value)
})
})
}
挂载成功
renderItem(item) {
switch(item.type) {
case 'input':
case 'password':
case 'textarea':
return <el-input type={item.type} v-model ={this.form[item.key]} > </el-input>
}}
能写字了
获取表单数据
deepClone(data) {
return JSON.parse(JSON.stringify(data));
}
doSubmit() {
this.$emit('submit',this.deepClone(this.form))
}
model在jsx不能传递
const {title,items,rules} = this.conf
const {form} = this
<el-form attrs={{model:form}} rules = {rules} >
renderColums下
<el-form-item prop={item.key}>
重置 render下的给一个ref
<el-form ref = "form" >
reset()函数
this.$refs.form.resetFields();
重置生效。
获取表单数据的另一种组件传值方法
dosubmit() {
let { submit } = this.$listeners;
submit(this.deepClone(this.form));
}
submit() {
return this.deepClone(this.form)
}
submit() 改名为getData()
create.vue下的docreate()
doCreate() {
let res = this.$refs.getData();
}
验证
validate(fn) {
this.$refs.form.validate((valid) => {
if(valid) {
fn(this.getData() )
} else {
fn(false);
}})}
create下的docreate方法留下之前的部分
验证规则做如下修改：
下面的代码报错了，因为 this.ruleForm.pass
改成this.form.passwordcreated 取出 rules
改变this取向
const {items,rules } = this.conf;
for(let key in rules ) {
let valArr = rules[key]；
valArr.forEach( item => {
if(item.validator) {
item.validator = ite,.validator.bind(this);
}})}
freeze做了改变
 {
}
GFormCreator
dosubmit() {
let { submit } = this.$listeners;
this.validate(submit);
}
case 'radio' :
return item.options.map((opt,i)=>{
return <el-radio key={i} v-model={this.form[item.key]} label={opt.label}>opt.text</el-radio>
}})
[{type:'radio',label:'权限分配',key:'permission',value:'2',options:[
{label:'2',text:'销售人员',},
{label:'1',text:'初审人员',},
]}]
接口文档 和数据相关
apis 下的user.js
export const createUser = ({username,password,permission}）=> {
return request.post('/permission/createUser',{
account:username,
password,
role_id:permission
})
})
create.vue
import {createUser} from '@/apis/user'
this.$refs.createForm.validate(async data => {
if (data) {
console.log('验证成功’, data);
let [data,res] = await createUser();
if (err) return this.$message('创建失败');
this.$message('创建成功')
}
})
贷款申请页面
1 导入数据
loan-input 下新建inputPageConf.js 导入数据
//性别
const sexOptions = [
{ value: "man", label: "男" },
{ value: "woman", label: "女" }
];
//行业
const companyOptions = [
{ value: "education", label: "教育" },
{ value: "finance", label: "金融" }
];
//婚否
const marriageOptions = [
{ value: "married", label: "已婚" },
{ value: "unmarried", label: "未婚" }
];
//学历
const educationOptions = [
{ value: "college", label: "大学" },
{ value: "highschool", label: "高中" }
];
export default Object.freeze({
cards: [
{
name: "个人基本信息",
children: [
[
{ label: "姓名", key: "name", type: "input" },
{ label: "出生日期", key: "birthday", type: "datetime" },
{
label: "性别",
key: "sex",
type: "select",
options: sexOptions
}
],
[{ label: "身份证", key: "identity_card", type: "input" }],
[
{
label: "婚姻状态",
key: "marriage",
type: "select",
options: marriageOptions
},
{
label: "教育程度",
key: "education",
type: "select",
options: educationOptions
},
{ label: "居住地址", key: "address1", type: "input" }
],
[
{ label: "户籍地址", key: "address2", type: "input" },
{ label: "居住电话", key: "phone", type: "input" },
{ label: "手机号", key: "mobile_phone", type: "input" }
]
].map(row => row.map(item => ({ colspan: 8, ...item })))
},
{
name: "职业信息",
children: [
[ // element原生属性
{ label: "现职公司", key: "company", type: "input" },
{
label: "所属行业",
attrs:{ placeholder:'请选择Green' },
key: "trade",
type: "select",
options: companyOptions
},
{ label: "职位", key: "position", type: "input" },
{ label: "公司地址", key: "address3", type: "input" }
].map(item => ({ colspan: 6, ...item })),
[
{ label: "公司类型", key: "company_type", type: "input" },
{ label: "公司邮箱", key: "company_email", type: "input" },
{ label: "公司电话", key: "company_phone", type: "input" }
].map(item => ({ colspan: 8, ...item }))
]
},
{
name: "收支情况",
children: [[{ label: "收支情况", key: "income", type: "input" }]]
},
{
name: "家庭联系人",
children: [
[
{ label: "关系1", key: "contact", type: "input" },
{ label: "姓名", key: "contact_name", type: "input" },
{ label: "手机", key: "contact_phone", type: "input" }
]
]
},
{
name: "工作证明人",
children: [
[
{ label: "关系2", key: "contact2", type: "input" },
{ label: "姓名", key: "contact2_name", type: "input" },
{ label: "手机", key: "contact2_phone", type: "input" }
],
[
{ label: "部门", key: "contact2_dep", type: "input" },
{ label: "职位", key: "contact2_pos", type: "input" }
],
[{ label: "备注", key: "remark", type: "textarea" }]
]
}
],
rules: {
name: [
{ required: true, message: "请输入姓名", trigger: "blur" },
{
min: 2,
max: 5,
message: "长度在 2 到 5 个字符",
trigger: "blur"
}
],
identity_card: [
{ required: true, message: "请输入身份证", trigger: "change" }
],
birthday: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
marriage: [
{ required: true, message: "请选择婚姻状态", trigger: "change" }
],
education: [
{ required: true, message: "请选择教育程度", trigger: "change" }
],
trade: [
{ required: true, message: "请选择所属行业", trigger: "change" }
],
address1: [
{ required: true, message: "请输入居住地址", trigger: "blur" }
],
address2: [
{ required: true, message: "请输入户籍地址", trigger: "blur" }
],
phone: [{ required: true, message: "请输入居住电话", trigger: "blur" }],
mobile_phone: [
{ required: true, message: "请输入手机号", trigger: "blur" }
],
company: [
{ required: true, message: "请输入现职公司全称", trigger: "blur" }
],
position: [{ required: true, message: "请输入职位", trigger: "blur" }],
address3: [
{ required: true, message: "请输入公司地址", trigger: "blur" }
],
company_type: [
{ required: true, message: "请输入公司类型", trigger: "blur" }
],
company_email: [
{ required: true, message: "请输入公司邮箱", trigger: "blur" }
],
company_phone: [
{ required: true, message: "请输入公司电话", trigger: "blur" }
],
income: [
{ required: true, message: "请输入收支情况", trigger: "blur" }
],
contact: [{ required: true, message: "请输入关系1", trigger: "blur" }],
contact_name: [
{ required: true, message: "请输入姓名", trigger: "blur" }
],
contact_phone: [
{ required: true, message: "请输入手机", trigger: "blur" }
],
contact2: [{ required: true, message: "请输入关系2", trigger: "blur" }],
contact2_name: [
{ required: true, message: "请输入姓名", trigger: "blur" }
],
contact2_phone: [
{ required: true, message: "请输入手机", trigger: "blur" }
],
contact2_dep: [
{ required: true, message: "请输入部门", trigger: "blur" }
],
contact2_pos: [
{ required: true, message: "请输入职位", trigger: "blur" }
]
},
}
)
2 cards兼容
GformCreator下
const {items,cards,rules} = this.conf;
this.rulesHandler(rules);
if(items) {
this.reactiveFileds(items)
}else if(cards) {
cards.forEach(card => {
if(card.children) {
this.reactiveFileds(card.children)
} })}
reactiveFileds(items,rules) {
items.forEach(rowArr => {
rowArr.forEach(item => {
this.$set(this.form,item.key,item.value)
})})}
rulesHandler(rules) {
}
具体代码如下图
render下
const {title,items,rules,cards} = this.conf;
return 下
<el-form ref="form" attrs = {{model:form}} rules = {rules} label-width = "80px">
{cards ? this.renderCards(cards) : this.renderRow(items)
}
renderCards
select datatime
case 'select':
return <el-select v-model={this.form[item.key]} attrs={item.attrs}>
{ item.options.map( opt => {
return <el-option
key = { opt.value}
label = { opt.label}
value = { opt.value}
</el-option>
})}
</el-select>
扫一扫
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
