vue2+jsx二次封装el-form表单
我们在日常工作中，经常遇到多条件的筛选或者是多数据的form，一条一条写起来太费时间+精力，二次封装form之后会大大节省我们的时间，我采用的方法是jsx，render中生成form的形式，废话不多说，直接上代码。2.然后二次封装其他基础组件比如el-select，el-radio。3.最后父组件引入子组件使用，并传入json。1.首先是子组件proform。
·
我们在日常工作中，经常遇到多条件的筛选或者是多数据的form，一条一条写起来太费时间+精力，二次封装form之后会大大节省我们的时间，我采用的方法是jsx，render中生成form的形式，废话不多说，直接上代码
1.首先是子组件proform
<script lang="jsx">
import {
Button,
Form,
FormItem,
Input,
InputNumber,
Row,
Col,
DatePicker,
TimePicker,
} from "element-ui";
import Select from "./components/ProSelect.vue";
import RadioGroup from "./components/ProRadioGroup.vue";
import CheckboxGroup from "./components/ProCheckboxGroup.vue";
const componentsMap = {
Input,
InputNumber,
Select,
RadioGroup,
CheckboxGroup,
DatePicker,
TimePicker,
};
export default {
props: {
labelWidth: {
type: String,
default: ''
},
labelPosition: {
type: String,
default: "left",
},
gutter: {
type: Number,
default: 15
},
schemas: {
type: Array,
default: () => [],
},
formData: {
type: Object,
default: () => ({}),
},
model: Object,
},
created() {
this.datas = this.schemas.slice(0, 3);
},
data() {
return {
flag: true,
datas: [],
};
},
methods: {
reset() {
this.$refs.formRef.resetFields();
},
validate() {
return this.$refs.formRef
.validate()
.then(() => {
return this.model;
})
.catch((err) => {
return Promise.reject(err);
});
},
},
render(h) {
const { schemas, labelWidth, labelPosition, gutter, model } = this;
return (
<Form
props={{ model: this.model }}
labelWidth={labelWidth + "px"}
labelPosition={labelPosition}
ref="formRef"
>
{/* {
{
scopedSlots:{
default: ()=>{
},
header: ()=>{
}
},
}
} */}
<Row gutter={gutter}>
{this.datas.map((item) => {
const rules = [];
if (item.required) {
rules.push({ required: true, message: `${item.label}不能为空` });
}
return (
<Col span={item.span}>
<FormItem label={item.label} prop={item.field} rules={rules}>
{h(componentsMap[item.component], {
props: {
...item.componentProps,
value: this.model[item.field],
},
on: {
input: (newValue) => {
this.model[item.field] = newValue;
},
},
})}
</FormItem>
</Col>
);
})}
<Col span={6}>
<FormItem>
<Button type="primary" onClick={this.validate}>
查询
</Button>
<Button onClick={this.reset}>重置</Button>
{schemas.length > 3 ? (
<span>
{this.flag ? (
<Button type="text" icon="el-icon-arrow-down"
onClick={() => {
this.flag = false;
this.datas = this.schemas;
}}
>
展开
</Button>
) : (
<Button type="text" icon="el-icon-arrow-up"
onClick={() => {
this.flag = true;
this.datas = this.schemas.slice(0, 3);
}}
>
收起
</Button>
)}
</span>
) : (
<div></div>
)}
</FormItem>
</Col>
</Row>
</Form>
);
},
};
</script>
<style scoped lang="scss">
::v-deep {
.el-form-item {
width: 100%;
display: flex;
.el-form-item__content {
flex: 1;
}
.el-form-item__label {
flex-shrink: 0;
padding-right: 12px;
}
}
.el-col {
padding: 0 8px;
}
.el-date-editor,
.el-select,
.el-input {
width: 100%;
}
.el-button {
margin-right: 10px;
}
}
</style>
2.然后二次封装其他基础组件比如el-select，el-radio
<script lang="jsx">
import { Select, Option } from 'element-ui'
export default {
props: {
value: [String, Array],
options: {
type: Array,
default: () => []
},
multiple: {
type:Boolean
}
},
data() {
return {}
},
computed: {
model: {
get() {
return this.value
},
set(newVal) {
this.$emit('input', newVal)
}
}
},
render(h) {
const { model, options, multiple} = this
return (
<Select vModel={this.model} clearable multiple={multiple}>
{options.map((item) => {
return <Option label={item.label} value={item.value}></Option>
})}
</Select>
)
}
}
</script>
<script lang="jsx">
import { Radio, RadioGroup} from 'element-ui'
export default {
props: {
value: [String, Array],
options: {
type: Array,
default: () => []
}
},
data() {
return {}
},
computed: {
model: {
get() {
return this.value
},
set(newVal) {
this.$emit('input', newVal)
}
}
},
render(h) {
const { model, options } = this
return (
<RadioGroup vModel={this.model}>
{options.map((item) => {
return <Radio label={item.label} value={item.value}></Radio>
})}
</RadioGroup>
)
}
}
</script>
<script lang="jsx">
import { CheckboxGroup, Checkbox } from 'element-ui'
export default {
props: {
value: Array,
options: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
computed: {
model: {
get() {
return this.value
},
set(newVal) {
this.$emit('input', newVal)
}
}
},
render(h) {
const { model, options } = this
return (
<CheckboxGroup vModel={this.model}>
{
options.map(item => {
return (
<Checkbox label={item.label} value={item.value}>
{item.label}
</Checkbox>
)
})
}
</CheckboxGroup>
)
}
}
</script>
3.最后父组件引入子组件使用，并传入json
<template>
<div class="wapper">
<ProForm
ref="form"
form-ref="freeForm"
:model="formData"
v-bind="formConfig"
:rules="rules"
/>
</div>
</template>
<script>
import { ProForm } from './ProForm '
export default {
components: {
ProForm,
},
data() {
return {
// 表单数据console
formData: {
username: "",
number: 0,
time: "",
orgIdProduction: "",
sex: "",
love: [],
developmentMethods: "",
},
// el-form-item 配置项
formConfig: {
// labelWidth: 100, // 标题宽度
labelPosition: "left",
gutter: 12,
schemas: [
{
required: true,
label: "用户名",
field: "username",
component: "Input", // el-input可以省略，默认使用el-input
placeholder: "请输入用户名", // placeholder可以省略，默认显示“请输入+label”
span: 6, // 使用栅格布局
},
{
label: "数字输入",
field: "number",
component: "InputNumber",
controlsPosition: "right",
span: 6, // 使用栅格布局
},
{
label: "所属单位",
labelWidth: 180, // 标题宽度-优先级高
component: "Select",
field: "orgIdProduction",
span: 6,
componentProps: {
multiple: true, // 是否多选
clearable: true, // 能否清空
placeholder: "请选择",
options: [
{
label: "白庄煤矿",
value: "01076430",
},
{
label: "梁宝寺煤矿",
value: "01076323",
},
],
},
onChange: (value) => {
console.log(value);
},
},
{
label: "日期选择",
field: "time",
component: "DatePicker",
type: "datetime",
span: 6,
componentProps: {
width: "100%",
},
},
{
label: "性别",
field: "sex",
span: 6, // 支持栅格布局
component: "RadioGroup", // 可以传入任意组件
componentProps: {
options: [
{
label: "男",
value: 1,
},
{
label: "女",
value: 2,
},
],
},
onChange: (e) => {
console.log(e);
},
},
{
label: "菜单",
field: "developmentMethods",
span: 6,
component: "RadioGroup",
componentProps: {
options: [
{
label: "菜单1",
value: "menu1",
},
{
label: "菜单二",
value: "menu2",
},
],
onChange: (e) => {
console.log(e);
},
},
},
{
label: "兴趣爱好",
field: "love",
span: 6, // 支持栅格布局
component: "CheckboxGroup", // 可以传入任意组件
componentProps: {
options: [
{
label: "读书",
value: 1,
},
{
label: '菜单二',
value: 'menu2'
}
]
}
}
]
},
addFormConfig: {
labelWidth: 100, // 标题宽度
labelPosition: 'left',
gutter: 12,
schemas: [
{
label: '用户名',
field: 'username',
component: 'Input', // el-input可以省略，默认使用el-input
placeholder: '请输入用户名' // placeholder可以省略，默认显示“请输入+label”
},
{
label: '数字输入',
field: 'number',
component: 'InputNumber',
controlsPosition: 'right'
},
{
label: '所属单位',
labelWidth: 180, // 标题宽度-优先级高
component: 'Select',
field: 'orgIdProduction',
componentProps: {
multiple: true, // 是否多选
placeholder: '请选择',
options: [
{
label: '白庄煤矿',
value: '01076430'
},
{
label: '梁宝寺煤矿',
value: '01076323'
}
]
},
onChange: (value) => {
console.log(value)
}
},
{
label: '日期选择',
field: 'time',
component: 'DatePicker',
type: 'datetime',
componentProps: {
width: '100%'
}
},
{
label: '性别',
field: 'sex',
component: 'RadioGroup', // 可以传入任意组件
componentProps: {
options: [
{
label: '男',
value: 1
},
{
label: '女',
value: 2
}
]
},
onChange: (e) => {
console.log(e)
}
},
{
label: '兴趣爱好',
field: 'love',
component: 'CheckboxGroup', // 可以传入任意组件
componentProps: {
options: [
{
label: '读书',
value: 1
},
{
label: '写字',
value: 2
},
{
label: '听歌',
value: 4
}
]
},
onChange: (e) => {
console.log(e)
}
},
{
label: '菜单',
field: 'developmentMethods',
component: 'RadioGroup',
isButton: true,
clearable: true,
hidden: true,
componentProps: {
options: [
{
label: '菜单1',
value: 'menu1'
},
{
label: '菜单二',
value: 'menu2'
}
]
}
}
]
},
// el-form-item 验证规则
};
},
methods: {
// 级联类型
changeMajor(type) {
const json = {
primary: [
{
label: "数学",
value: 1,
},
{
label: "语文",
value: 2,
},
],
junior: [
{
label: "英语",
value: 5,
},
{
label: '生物',
value: 7
}
]
}
},
openAddFormModal() {
DetailFormModal.show({
title: '新增数据',
schemas: this.addFormConfig.schemas,
formData: this.formData
}).then(res => {
console.log('openAddFormModal', res)
})
}
}
}
</script>
<style>
.wapper {
background: #fff;
}
</style>
最后：展示效果：
希望能对你有帮助
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)