# MForm
# 参数配置
以下字段为MForm扩展配置，其他配置和事件请参照el-form
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elRow | el-row的props配置 | object | - |
| noWrap | 是否响应式换行 | boolean | - |
| columns | form的每个组件配置 | Array | - |
# columns 示例
[
{
label:'姓名', // 对应 form-item label
el:'el-input', // 要渲染的elementUI组件 可以省略el 直接写el:'input',不写该字段默认会渲染成 span h('span',null,当前model对应prop字段的值)
render(h){}, // 可自定义渲染需要的组件，当el启用时，该字段不启用
prop:'name', // 对应 form mode字段需要绑定的key
slots:{ // 可选插槽 对应 要渲染的组件的插槽
...//
prepend(h){
reutrn h('button',null,'test')
}
},
listeners:{ // 可选监听事件 对应 要渲染的组件所有的事件名称，具体请看 elementui 文档
change(e){
}
},
rules:{ // el-form-item 的验证
},
getColumn(obj){
},//返回colum 来进行合并
... //其他 可选props 包括 要渲染组件的props, el-form-item 对应的props,el-col对应props，都可以定义在当前对象中
}
]
# 用法
表单控制
表单展示
{ "state": "默认渲染span,性别选中男不显示该字段", "list": [ {} ] }<template>
<div>
<h3>表单控制</h3>
<m-form :formData="options" :columns="optionsColumns"></m-form>
<br>
<h3>表单展示</h3>
{{formData}}
<m-form
:formData="formData"
ref="mform"
:size="options.size"
no-warp
:labelPosition="options.labelPosition"
:columns="columns"
:disabled="options.disabled"
:labelWidth="options.labelWidth+'px'"
>
<el-progress type="circle" slot="slot" :percentage="80" color="#8e71c7"></el-progress>
</m-form>
</div>
</template>
<script>
export default {
data() {
return {
options: {
size: "small",
labelWidth: 100,
checkboxGroup:['a']
},
formData: {
state: "默认渲染span,性别选中男不显示该字段",
list: [{}]
},
optionsColumns: [
{
label: "对齐方式",
el: "radio-group",
prop: "labelPosition",
type: "button",
dataList: [
{
label: "左对齐",
value: "left"
},
{
label: "右对齐",
value: "right"
},
{
label: "顶部对齐",
value: "top"
}
]
},
{
label: "尺寸",
prop: "size",
el: "radio-group",
type: "button",
dataList: [
{
label: "medium",
value: "medium"
},
{
label: "small",
value: "small"
},
{
label: "mini",
value: "mini"
}
]
},
{
label: "禁用全部字段",
prop: "disabled",
el: "switch"
},
{
label: "禁用部分字段",
prop: "disabledArr",
el: "select",
collapseTags: true,
multiple: true,
getList: this.getSelectList
},
{
label: "labelWidth",
prop: "labelWidth",
el: "input-number",
min: 0
},
{
label: "复选框",
el: "checkbox-group",
prop: "checkboxGroup",
disabled:false,
span: 30,
dataList: [
{
label: "复选框 A",
value: "a",
disabled:true
},
{
label: "复选框 B",
value: "b"
},
{
label: "复选框 c",
value: "c",
disabled:true
},
{
label: "复选框 D",
value: "d"
}
]
}
]
};
},
computed: {
columns() {
return [
{
el: "input",
prop: "name",
label: "姓名",
placeholder: "请输入姓名",
disabled: this.isDisabled("name"),
span: 22,
rules: {
required: true,
message: "请输入姓名",
trigger: "blur"
}
},
{
el: "radio-group",
disabled: this.isDisabled("sex"),
label: "性别",
prop: "sex",
dataList: [{ label: "男", value: 1 }, { label: "女", value: 0 }],
rules: {
required: true,
message: "请选择性别",
trigger: "change"
}
},
...(this.formData.sex !== 1
? [
{
label: "默认渲染",
prop: "state",
span: 22
}
]
: []),
{
label: "籍贯",
disabled: this.isDisabled("addr"),
el: "cascader",
prop: "addr",
options: [
{
label: "浙江省",
value: 1,
children: [
{
label: "杭州市",
value: 2,
children: [
{
label: "余杭区",
value: 3
}
]
}
]
}
]
},
{
el: "select",
disabled: this.isDisabled("xl"),
label: "学历",
prop: "xl",
dataList: [
{
label: "大学",
value: 1
},
{
label: "高中",
value: 2
},
{
label: "初中",
value: 3
}
]
},
{
el: "date-picker",
label: "出生年月",
disabled: this.isDisabled("date"),
prop: "date",
type: "month",
format: "yyyy年MM月"
},
{
label: "备注",
disabled: this.isDisabled("remark"),
prop: "remark",
span: 22,
el: "input",
type: "textarea"
},
{
label: "render渲染",
prop: "render",
render: h => {
return <el-progress type="circle" percentage={30} />;
}
},
{
label: "slot渲染",
prop: "slot"
},
...this.getOtherColumns(),
{
prop: "btn",
span: 22,
render: () => {
return (
<div style="text-align:center">
<el-button
disabled={this.isDisabled("btn")}
onClick={() => {
this.formData.list.push({});
}}
>
添加联动
</el-button>
<el-button
onClick={() => {
this.$refs.mform
.validate()
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
}}
>
表单验证
</el-button>
<el-button
onClick={() => {
this.formData = {
state: "默认渲染span,性别选中男不显示该字段",
list: [{}]
};
}}
>
重置表单
</el-button>
</div>
);
}
}
];
}
},
methods: {
isDisabled(filed) {
return (this.options.disabledArr || []).indexOf(filed) > -1;
},
getSelectList() {
return Promise.resolve(
this.columns.map(obj => ({ label: obj.label, value: obj.prop }))
);
},
getList({ parent }) {
let arr = [];
if (parent === "zhejiang") {
arr = [
{ label: "杭州", value: "hangzhou" },
{ label: "宁波", value: "ningbo" }
];
} else if (parent === "shandong") {
arr = [
{ label: "济南", value: "jinan" },
{ label: "泰安", value: "taian" }
];
}
return new Promise(reslove => {
setTimeout(() => {
reslove(arr);
}, 1000);
});
},
getOtherColumns() {
return this.formData.list
.map((obj, index) => {
return [
{
label: `联动选择${index}`,
prop: `list[${index}].label`,
el: "select",
rules: {
required: true,
message: "请选择省份",
trigger: "change"
},
dataList: [
{
label: "浙江",
value: "zhejiang"
},
{
label: "山东",
value: "shandong"
}
]
},
{
el: "select",
getList: this.getList, // 异步获取数据
prop: `list[${index}].value`,
span: 6,
rules: {
required: true,
message: "请选择城市",
trigger: "change"
},
params: {
parent: `list[${index}].label` // 请求参数
}
},
{
prop: `del${index}`,
span: 6,
render: (
<el-button
type="danger"
onClick={() => {
this.formData.list.splice(index, 1);
}}
>
删除
</el-button>
)
}
];
})
.flat();
}
}
};
</script>
显示代码