需求:根据传参动态生成表单,例如搜索表格的表单
1.组件封装
<template>
<el-form class="dynamic-form" ref="form" :model="form" :lable-width="lableWidth" :inline="true">
<el-form-item v-for="(item,index) in list" :label="item.label" label-position="left"
:key="index" :props="item.name">
<component :is="item.type" v-model="form[item.name]">
<template v-if="item.children">
<component v-for="(child,i) in item.children.list" :key="`${index}_${i}`"
:value="child.value" :label="child.label" :is="item.children.type">
{{child.label}}
</component>
</template>
</component>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="handleReset">重置</el-button>
<el-button type="primary" @click="handleExport">导出</el-button>
</el-form-item>
</el-form>
</template>
<script>
/**
* 1.list 接受从父组件传递过来的定义渲染接口的内容值
* 2.利用动态根据传递过来的list 中的type 进行组件渲染
**/
export default {
name: 'FormGroup',
data() {
return {
form: {},
};
},
props: {
list: {
type: Array,
default: () => {},
},
lableWidth: {
type: Number,
default: 100,
},
},
methods: {
handleSearch() {
this.$emit('handleSearch', this.form);
},
handleExport() {},
handleReset() {
this.form = {};
//this.$refs.form.resetFields();
},
},
};
</script>
<style lang="scss" scoped>
.dynamic-form {
::v-deep {
.el-form-item__label {
color: #9fc0f3;
}
.el-input__inner {
border: 1px solid #2da4ff;
background: rgba(1, 6, 27, 0.7);
color: #9fc0f3;
}
}
}
</style>
2.传递数据定义
[{
name: 'name',
type: 'el-input',
value: '',
label: '姓名',
},
{
name: 'select',
type: 'el-select',
value: '',
label: '选择',
children: {
type: 'el-option',
list: [
{ value: 'man', label: '男' },
{ value: 'woman', label: '女' },
],
},
}]