网站建设的开发的主要方法,网站开发后端怎么开发,辽宁省电力建设网站,深圳网站建设明细报价表文章目录 前言一、新增table组件二、使用步骤 前言
在 基于element-plus定义表单配置化 基础上#xff0c;封装个Element-plus的table表格 由于表格不同于form组件#xff0c;需自定义校验器#xff0c;以下组件配置了单个校验#xff0c;及提交统一校验方法#xff0c;且… 文章目录 前言一、新增table组件二、使用步骤 前言
在 基于element-plus定义表单配置化 基础上封装个Element-plus的table表格 由于表格不同于form组件需自定义校验器以下组件配置了单个校验及提交统一校验方法且自定义必填校验*显示和校验错误部分边框标红等实际可根据业务及不同场景优化改造相关定义 后期抽空新增表格行及删除行等功能, 一、新增table组件
table-configuration/index.vue
templateel-tableborderreftableRef:show-headershowHeader:datatableDatastylewidth: 100%tooltip-effect:max-heighttablemaxHeightel-table-column typeselection :fixedselectionFixed width55 v-ifhasSelection/template v-for(item, index) in tableProperty :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 #defaultscopecomponent :class[scope.$index 0 getIsErrorClass(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, item, scope.$index, index)fieldChange(val) change(val, item, scope.$index, index) //template/el-table-column/template/el-table
/template
script langts src./index.ts/
style langless
.is-error .el-select-v2__wrapper,.is-error .el-select-v2__wrapper:focus,.is-error .el-textarea__inner,.is-error .el-textarea__inner:focus {box-shadow: 0 0 0 1px var(--el-color-danger) inset
}.is-error .el-input__wrapper {box-shadow: 0 0 0 1px var(--el-color-danger) inset
}
.table {_header:before {content: *;color: var(--el-color-danger);margin-right: 4px;}
}
/styletable-configuration/index.ts
import { tableHooks } from /composables/table-hooks;
import { computed, defineComponent, reactive, ref } from vue;
import Input from /components/form-configuration/input.vue;
import Select from /components/form-configuration/select.vue;
import Vhtml from /components/form-configuration/v-html.vue;
import Upload from /components/form-configuration/upload.vue;
import Switch from /components/form-configuration/switch.vue;
import Radio from /components/form-configuration/radio.vue;
import Checkbox from /components/form-configuration/checkbox.vue;
import Date from /components/form-configuration/date.vue;
import Cascader from /components/form-configuration/cascader.vue;
import { isArray } from lodash-es;
import { ElMessage } from element-plus;
import type { rulesType } from /interface;const ruleType {required: false,message: ,trigger: ,validator: (val: any) {return val}
}
const fieldProperty {label: demo,type: Input,field: demo,width: 120px,err: ,property: {maxlength: 200,rules: [ruleType]}
}
export default defineComponent({components: {Input,Select,Vhtml,Upload,Switch,Radio,Checkbox,Date,Cascader,},props: {align: {type: String,default: left, // left / center / right},showHeader: {type: Boolean,default: true,},selectionFixed: {type: Boolean,default: false,},showOverflowTooltip: {type: Boolean,default: true,},hasSelection: {type: Boolean,default: false,},property: {type: Object,default() {return [ fieldProperty ];},},data: {type: Object,default() {return {};},},},setup(props, { emit }) {const { tablemaxHeight } tableHooks();const tableRef ref()const tableData computed({get() {return props.data;},set(val) {emit(update:data, val);},});const noType noTypeconst tableProperty computed(() props.property);const blur (val: any, item: typeof fieldProperty, rowIndex: number, colIndex: number) {let arr: Arrayboolean []if (item.property.rules isArray(item.property.rules)) {arr validateForField(item, val, blur, rowIndex, colIndex)}if (!arr.length) {emit(blur, {val, field: item.field, rowIndex, colIndex}) // 触发clearIsError(rowIndex, colIndex)}}const change (val: any, item: typeof fieldProperty, rowIndex: number, colIndex: number) {let arr: Arrayboolean []if (item.property.rules isArray(item.property.rules)) {arr validateForField(item, val, change, rowIndex, colIndex)}if (!arr.length) {emit(change, {val, field: item.field, rowIndex, colIndex}) // 触发clearIsError(rowIndex, colIndex)}}const isError ref{rowIndex: number, colIndex: number}[]([])const validateForField (item: typeof fieldProperty, val: any, type: string, rowIndex: number, colIndex: number) {let arr: Arrayboolean []item.property.rules.forEach((valid) {const types [valid.trigger, noType]if (valid.required !val) {ElMessage.error(valid.message)arr.push(false)isError.value.push({rowIndex, colIndex,})return}if (!valid.required !val || !types.includes(type)) returnif (!valid.validator) returnconst bool valid.validator(val)if (!bool) {ElMessage.error(valid.message)arr.push(bool)isError.value.push({rowIndex, colIndex,})}})return arr}const clearIsError (rowIndex: number, colIndex: number) {if (rowIndex -1) {isError.value []} else {isError.value isError.value.filter((item) {return !((item.rowIndex rowIndex) (item.colIndex colIndex))})}}const validate () {let arr: Arrayboolean []clearIsError(-1, -1)tableData.value.forEach((data: object, rowIndex: number) {tableProperty.value.forEach((tabPro: any, colIndex: number) {if (!tabPro.property.rules) returnconst field tabPro.field as keyof typeof dataarr.push(...validateForField(tabPro, data[field], noType, rowIndex, colIndex))});});return !arr.length}const getIsErrorClass computed(() {return (rowIndex: number, colIndex: number) {let bool falseisError.value.forEach((error) {(error.rowIndex rowIndex) (error.colIndex colIndex) (bool true)})return bool ? is-error : }})const getTableHeader (rules: rulesType[]) {if (!rules) return return !!rules.filter((item) item.required).length ? table_header : }return {tableRef,tablemaxHeight,tableProperty,tableData,isError,getIsErrorClass,getTableHeader,change,blur,validate};},
});
二、使用步骤
TableConfigurationrefsupplierListRefv-model:datasupplierListEntity.product:hasSelectiontrue:selectionFixedtrue:propertytablePropertyaligncenter/import { defineComponent, reactive, ref } from vue
import TableConfiguration from /components/table-configuration/index.vue
export default defineComponent({components: {TableConfiguration},setup() {const tableRef ref()const tableProperty reactive([{ label: Input01, type: Input, field: Input01, property: {maxlength: 500,rules: [{ required: false, message: error, trigger: blur, validator: (value: string) {return /^\?[1-9][0-9]*$/.test(value)}}]}},{ label: Input02, type: Input, field: Input02, width: 200px, property: {maxlength: 500,rules: [{ required: true, message: error, trigger: blur }]}}])const tableEntity reactive({table: [{Input01: ,Input02: ,}]})const validate () {tableRef.value.validate()}return {tableRef,tableProperty,tableEntity,validate}},
})
