element-plus定义表单配置化

由于表格不同于form组件需自定义校验器以下组件配置了单个校验及提交统一校验方法且自定义必填校验*显示和校验错误部分边框标红等实际可根据业务及不同场景优化改造相关定义

后期抽空新增表格行及删除行等功能,

templateel-tableborderreftableRef:show-headershowHeader:datatableDatastylewidth:

100%tooltip-effect:max-heighttablemaxHeightel-table-column

typeselection

:keyitemel-table-column:alignalign:sortableitem.sortable:min-widthitem.width:show-overflow-tooltipshowOverflowTooltip:labelitem.labeltemplate

#headerdiv

:class[getTableHeader(item.property.rules)]

v-htmlitem.label/div/templatetemplate

:class[scope.$index

index)]v-model:contentscope.row[item.field]v-modelscope.row[item.field]:property{...item.property,

name:

item.field}:isitem.typefieldBlur(val)

blur(val,

//template/el-table-column/template/el-table

/template

.el-select-v2__wrapper,.is-error

.el-select-v2__wrapper:focus,.is-error

{box-shadow:

var(--el-color-danger);margin-right:

4px;}

/styletable-configuration/index.ts

import

/components/form-configuration/input.vue;

import

/components/form-configuration/select.vue;

import

/components/form-configuration/v-html.vue;

import

/components/form-configuration/upload.vue;

import

/components/form-configuration/switch.vue;

import

/components/form-configuration/radio.vue;

import

/components/form-configuration/checkbox.vue;

import

/components/form-configuration/date.vue;

import

/components/form-configuration/cascader.vue;

import

{Input,Select,Vhtml,Upload,Switch,Radio,Checkbox,Date,Cascader,},props:

{align:

[]item.property.rules.forEach((valid)

{const

{ElMessage.error(valid.message)arr.push(false)isError.value.push({rowIndex,

colIndex,})return}if

{ElMessage.error(valid.message)arr.push(bool)isError.value.push({rowIndex,

colIndex,})}})return

-1)tableData.value.forEach((data:

object,

{tableProperty.value.forEach((tabPro:

any,

dataarr.push(...validateForField(tabPro,

data[field],

falseisError.value.forEach((error)

{(error.rowIndex

{tableRef,tablemaxHeight,tableProperty,tableData,isError,getIsErrorClass,getTableHeader,change,blur,validate};},

});

TableConfigurationrefsupplierListRefv-model:datasupplierListEntity.product:hasSelectiontrue:selectionFixedtrue:propertytablePropertyaligncenter/import

defineComponent,

/components/table-configuration/index.vue

export

/^\?[1-9][0-9]*$/.test(value)}}]}},{

label:

{tableRef.value.validate()}return

{tableRef,tableProperty,tableEntity,validate}},