在前端系统开发中,系统页面涉及到的表单组件比较多,所以进行了简单的封装。封装的包括一些Form表单组件,如下:input输入框、select下拉框、等
表单组件官方链接:点击跳转
不封装element组件,每一个input组件绑定一个form对象,例如官网。
简单封装element组件,利用for循环生成form表单的每一项el-form-item。
进一步封装,利用判断表单组件的类型,是input、select或者其它表单组件。
终极封装,把el-form表单封装成一个独立的表单,自定义命名为AreaFormItem.vue;然后单页面vue调用AreaFormItem.vue传参以及表单数据回显等操作。
实现代码:【表单组件未封装】
备注:因为是横着的表单,这里加入了el-row和el-col 。
//html
//涉及到的变量
const state = reactive({
form: {
name: '',
voyageNo: '',
loadName: '',
dischargName: '',
cargoType: ''
},
})
const formItems = [
{
type: 'input',
label: '船名',
key: 'name',
placeholder: '请输入或者选择船名'
},
{
type: 'input',
label: '航次',
key: 'voyageNo',
placeholder: '请输入或者选择航次'
},
{
type: 'select',
label: '装港',
key: 'loadName',
placeholder: '请输入或者选择装港'
},
{
type: 'select',
label: '卸港',
key: 'dischargName',
placeholder: '请输入或者选择始港'
},
{
type: 'input',
label: '货种',
span : 4,
key: 'cargoType',
placeholder: '请输入或者选择货种',
}
]
blur_Point(value, 'cargoType', '')"
@clear="clear_select('cargoType')">
//涉及到的数据
const routeState = reactive({
loading_startPoint:false,
options_startPoint:[]
})
{
item.filterable &&
data.editSelectValue &&
(data.formInline[item.key] = data.editSelectValue);
}
" @change="
(val) => {
handleSelectEdit(val, item);
searchChange(
item.linkageKey,
item.optionsData,
data.formInline[item.key],
item.linkageDraw,
item.autoPosition,
item.dynamicLinkageKey,
props.formItems,
item.linkageKeyList,
item
);
}
">
handlechange(value, item.limit, item.isJump || true)
" :filterable="item.filterable || false">
handleSelectchange(value, item)"
:filterable="item.filterable || false" :filter-method="(filterVal) => {
filtertreeLocationSelect(filterVal, item, 'treeLocationSelect');
}" @blur="blur(item, 'treeLocationSelect')">
{
item.getSelectRemoteValue &&
item.getSelectRemoteValue(val, data.remoteSelectData);
}
" :disabled="item.isEditAbled && data.isAbled">
{{ item.suffix }}
{
handleCheckAllChange(state, item.key);
}
" v-if="item.optionCheckAll">全部
{{ checkItem.label }}
{{ item.suffix }}
{{ item.suffix }}
{
item.selectOptionChange(val, item);
}
">
{
item.handleCheckAll(val, item, data.formInline);
}
">
全部区域
item.linkageAction
? finallyLinkageSolve(item)
: warningLevelChange(val)
">
{{ aitem.label
}}
一级
二级
三级
m
{{ columnItem.label }}
{{ inpItem.label }}
男
女
fileClear('fileClear', data.headerResult.fileName, item)
">
//调用组件