Elemnt ui 组件封装(form)
<template>
<el-form
class="form"
:inline="formConfig.inline"
:model="value"
:label-width="formConfig.labelWidth"
:rules="rules"
:ref="refString"
:size="formConfig.size"
>
<slot name="formItem" />
<el-form-item
v-for="(item, index) in formConfig.formItemList"
:key="index"
:label="item.label"
:prop="item.prop"
:width="formConfig.width"
>
<el-input
v-if="item.type == 'input'"
v-model="value[item.prop]"
:disabled="item.disabled"
:clearable="true"
:placeholder="item.placeholder"
></el-input>
<el-select
:clearable="true"
v-else-if="item.type == 'select'"
v-model="value[item.prop]"
:disabled="item.disabled"
:placeholder="item.placeholder"
@change="item.select"
>
<el-option
v-for="(optItem, index) in item.optList"
:key="index"
:label="optItem.label"
:value="optItem.value"
></el-option>
</el-select>
<el-date-picker
:value-format="item.dateFormate"
v-else
v-model="value[item.prop]"
:type="item.type"
:disabled="item.disabled"
:clearable="true"
:placeholder="item.label"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
</el-form-item>
<div class="searchBtn">
<el-button-group>
<el-button
class="btn"
v-for="(item, index) in formConfig.operate"
:key="index"
:size="item.size"
:type="item.type"
:icon="item.icon"
@click="item.handleClick(value)"
>{{ item.name }}
</el-button>
</el-button-group>
<slot name="operate"></slot>
</div>
</el-form>
</template>
<script>
export default {
components: {},
props: {
formConfig: {
type: Object,
required: true,
},
value: {
type: Object,
required: true,
},
rules: {
type: Object,
},
refString: {
type: String
}
},
computed: {},
methods: {
setDefaultValue() {
// 设置默认值
this.formConfig.formItemList.forEach(({ key, itemValue }) => {
if (value[key] === undefined || value[key] === null) {
this.$set(value,key,itemValue);
}
});
},
_forceUpdate() {
this.$forceUpdate();
}
},
mounted() {
this.setDefaultValue();
},
};
</script>
<style lang="scss" scoped>
.form {
min-width: 300px;
}
.searchBtn {
.btn {
margin-left: 20px;
}
}
</style>
formConfig配置
formConfig: {
inline: true,
size: "normal",
labelWidth: '100',
width: '180',
formItemList: [
{label: '商品名称',prop: 'name',type: 'input', placeholder: '请输入商品名称'},
{label: '进价',prop: 'incode',type: 'input', placeholder: '请输入进价'},
{label: '售价',prop: 'expend',type: 'input', placeholder: '请输入售价'},
{label: '库存数量',prop: 'number',type: 'input', placeholder: '请输入库存数量'},
{label: '商品描述',prop: 'remark',type: 'input', placeholder: '请输入商品描述'},
{label: '供应商',prop: 'resource',type: 'input', placeholder: '请输入供应商'}
],
operate: [
{type: 'primary',icon: '',name: '取消',size: 'normal',handleClick: function() {}},
{type: 'primary',icon: '',name: '确定',size: 'normal',handleClick: (form) => {
this.handleSubmit(form);
}},
]
}
本文作者:ajajaz
本文链接:https://www.cnblogs.com/guozhiqiang/p/16012211.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库