form組件

<template>

? ? <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="150px">

? ? ? ? <el-row>

? ? ? ? ? ? <el-col v-for="(item, index) in fromTypeList" :key="index" :span="item.span">

? ? ? ? ? ? ? ? <el-form-item :label="item.label" :prop="item.isRequire ? item.valueKey : null">

? ? ? ? ? ? ? ? ? ? <!-- 單選 -->

? ? ? ? ? ? ? ? ? ? <el-radio-group :disabled="item.disabled ? true : false" v-if="item.type == 'radio'"

? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleForm[item.valueKey]">

? ? ? ? ? ? ? ? ? ? ? ? <el-radio v-for="(dict, num) in item.options" :key="num" :value="dict.value">{{ dict.label

? ? ? ? ? ? ? ? ? ? ? ? ? ? }}</el-radio>

? ? ? ? ? ? ? ? ? ? </el-radio-group>

? ? ? ? ? ? ? ? ? ? <!-- 下拉框 -->

? ? ? ? ? ? ? ? ? ? <el-select v-else-if="item.type == 'select'" :disabled="item.disabled ? true : false"

? ? ? ? ? ? ? ? ? ? ? ? v-model="ruleForm[item.valueKey]" :placeholder="item.placeholder"

? ? ? ? ? ? ? ? ? ? ? ? @change="(val) => changeSelect(val, item)">

? ? ? ? ? ? ? ? ? ? ? ? <el-option v-for="(dict, num) in item.options" :key="num" :value="dict.value"

? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="dict.label" />

? ? ? ? ? ? ? ? ? ? </el-select>

? ? ? ? ? ? ? ? ? ? <!-- 日期 -->

? ? ? ? ? ? ? ? ? ? <el-date-picker v-else-if="item.type == 'dateTime'" v-model="ruleForm[item.valueKey]"

? ? ? ? ? ? ? ? ? ? ? ? :disabled="item.disabled ? true : false" :format="item.format" :value-format="item.format"

? ? ? ? ? ? ? ? ? ? ? ? type="date" :placeholder="item.placeholder" style="width: 100%"

? ? ? ? ? ? ? ? ? ? ? ? @change="(event) => changeDate(event, item)" />

? ? ? ? ? ? ? ? ? ? <!-- 復(fù)選框 -->

? ? ? ? ? ? ? ? ? ? <el-checkbox-group v-else-if="item.type == 'checkBox'" v-model="ruleForm[item.valueKey]"

? ? ? ? ? ? ? ? ? ? ? ? :disabled="item.disabled ? true : false">

? ? ? ? ? ? ? ? ? ? ? ? <el-checkbox v-for="(dict, num) in item.options" :key="num" :value="dict.value" name="type">

? ? ? ? ? ? ? ? ? ? ? ? ? ? {{ dict.label }}

? ? ? ? ? ? ? ? ? ? ? ? </el-checkbox>

? ? ? ? ? ? ? ? ? ? </el-checkbox-group>

? ? ? ? ? ? ? ? ? ? <!-- 文本框 -->

? ? ? ? ? ? ? ? ? ? <el-input v-else-if="item.type == 'textarea'" type="textarea" :maxlength="item.maxlength"

? ? ? ? ? ? ? ? ? ? ? ? :show-word-limit="item.maxlength ? true : false" :disabled="item.disabled ? true : false"

? ? ? ? ? ? ? ? ? ? ? ? v-model.trim="ruleForm[item.valueKey]" :placeholder="item.placeholder">

? ? ? ? ? ? ? ? ? ? </el-input>

? ? ? ? ? ? ? ? ? ? <!-- 上傳附件 -->

? ? ? ? ? ? ? ? ? ? <div v-else-if="item.type == 'files'" style="width: 100%;">

? ? ? ? ? ? ? ? ? ? ? ? <upload-files v-model="ruleForm[item.valueKey]" :fileShowType="item.fileShowType"

? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled="item.disabled ? true : false"></upload-files>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <!-- 輸入框 -->

? ? ? ? ? ? ? ? ? ? <el-input v-else-if="item.type == 'activeInput'" :disabled="item.disabled ? true : false"

? ? ? ? ? ? ? ? ? ? ? ? v-model.trim="ruleForm[item.valueKey]" :placeholder="item.placeholder"

? ? ? ? ? ? ? ? ? ? ? ? @focus="(event) => focusClick(event, item)">

? ? ? ? ? ? ? ? ? ? ? ? <template #suffix v-if="item.icon">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-icon class="el-input__icon" v-if="item.icon == 'ArrowDownBold'">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ArrowDownBold />

? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-icon>

? ? ? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? ? </el-input>

? ? ? ? ? ? ? ? ? ? <!-- 數(shù)字輸入框 -->

? ? ? ? ? ? ? ? ? ? <el-input-number :max="item.max" v-else-if="item.type == 'numberInput'" style="width: 100%;"

? ? ? ? ? ? ? ? ? ? ? ? :controls="false" :disabled="item.disabled ? true : false" v-model="ruleForm[item.valueKey]"

? ? ? ? ? ? ? ? ? ? ? ? :placeholder="item.placeholder" />

? ? ? ? ? ? ? ? ? ? <el-table v-else-if="item.type == 'table'" :data="item.dataSource" border>

? ? ? ? ? ? ? ? ? ? ? ? <el-table-column label="序號" width="100" align="center">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{ scope.$index + 1 }}

? ? ? ? ? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? ? ? ? </el-table-column>

? ? ? ? ? ? ? ? ? ? ? ? <el-table-column v-for="(ele, nums) in item.columnList" :key="nums" :prop="ele.prop"

? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="ele.label" :align="ele.align" :width="ele.width">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <template #default="scope">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span v-if="ele.type == 'date'">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{ parseTime(scope.row[ele.prop], '{y}-{m}-u0z1t8os') }}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span v-else>{{ scope.row[ele.prop] }}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? ? ? ? </el-table-column>

? ? ? ? ? ? ? ? ? ? </el-table>

? ? ? ? ? ? ? ? ? ? <el-input v-else :disabled="item.disabled ? true : false" v-model.trim="ruleForm[item.valueKey]"

? ? ? ? ? ? ? ? ? ? ? ? :placeholder="item.placeholder">

? ? ? ? ? ? ? ? ? ? </el-input>

? ? ? ? ? ? ? ? </el-form-item>

? ? ? ? ? ? </el-col>

? ? ? ? </el-row>

? ? </el-form>

</template>

<script setup name="newFrom">

import { defineProps, ref } from 'vue'

const emit = defineEmits([])

const props = defineProps({

? ? fromList: {

? ? ? ? type: Array,

? ? ? ? default: [],

? ? },

? ? fromRules: {

? ? ? ? type: Object,

? ? ? ? default: () => { },

? ? }

})

console.log(props.fromList);

const { fromList: fromTypeList, fromRules: rules } = toRefs(reactive(props))

const data = reactive({

? ? ruleForm: {}

});

const { ruleForm } = toRefs(data);

const ruleFormRef = ref(null)

const submitFrom = () => {

? ? return ruleFormRef.value.validate((valid, fields) => {

? ? ? ? return valid

? ? })

}

const getData = () => {

? ? return ruleForm.value

}

function changeDate(val, item) {

? ? emit('updateData', { value: val, item: item })

}

function focusClick(event, item) {

? ? event.target.blur()

? ? emit('updateData', { value: event, item: item })

}

function changeSelect(val, item) {

? ? emit('updateData', { value: val, item: item })

}

function resetForm (){

? ? ruleFormRef.value.resetFields()

}

// 設(shè)置表單數(shù)據(jù)

function setFormData(data) {

? ? console.log(data);

? ? for (let key in data) {

? ? ? ? ruleForm.value[key] = data[key]

? ? }

}

defineExpose({ submitFrom, getData, setFormData, resetForm })

</script>

父組件使用

<template>

? ? ? <newFrom ref="newFromRef" :fromList="fromList" :fromRules="rules"></newFrom>

? ? ?<button @click="submit"></button>

</template>

<script setup>

const fromList = ref([

{ label: '表格1：', type: 'input', isRequire: true, span: 20, valueKey: 'aaaaa', placeholder: '密碼' }

])

const?rules = {

aaaaa: [{ required: true, message: '校驗信息', trigger: 'blur' }],

}

function?submit(){

接受檢驗的傳參ture通過校驗

const validate = await proxy.$refs.newFromRef.submitFrom()

}

</script>