<template>
? <el-form ref="form" :model="formData" label-width="80px">
? ? <el-form-item
? ? ? v-for="item in formList"
? ? ? :key="item.prop"
? ? ? :label="item.label"
? ? ? :prop="item.prop"
? ? >
? ? ? <div class="form-item-container">
? ? ? ? <template v-if="item.prefix">
? ? ? ? ? <span class="prefix">{{ item.prefix }}</span> ?--前置單位
? ? ? ? </template>
? ? ? ? <template v-if="item.type === 'input'">
? ? ? ? ? <el-input
? ? ? ? ? ? v-model="formData[item.prop]"
? ? ? ? ? ? :placeholder="item.placeholder"
? ? ? ? ? ? :clearable="item.clearable"
? ? ? ? ? ? :maxlength="item.maxlength"
? ? ? ? ? ? @change="handleChange(item.prop, formData[item.prop])"
? ? ? ? ? />
? ? ? ? </template>
? ? ? ? <template v-if="item.type === 'textarea'">
? ? ? ? ? <el-input
? ? ? ? ? ? type="textarea"
? ? ? ? ? ? v-model="formData[item.prop]"
? ? ? ? ? ? :placeholder="item.placeholder"
? ? ? ? ? ? :clearable="item.clearable"
? ? ? ? ? ? :maxlength="item.maxlength"
? ? ? ? ? ? @change="handleChange(item.prop, formData[item.prop])"
? ? ? ? ? />
? ? ? ? </template>
? ? ? ? <template v-if="item.type === 'select'">
? ? ? ? ? <el-select
? ? ? ? ? ? v-model="formData[item.prop]"
? ? ? ? ? ? :placeholder="item.placeholder"
? ? ? ? ? ? :clearable="item.clearable"
? ? ? ? ? ? @change="handleChange(item.prop, formData[item.prop])"
? ? ? ? ? >
? ? ? ? ? ? <el-option
? ? ? ? ? ? ? v-for="option in item.options"
? ? ? ? ? ? ? :key="option.value"
? ? ? ? ? ? ? :label="option.label"
? ? ? ? ? ? ? :value="option.value"
? ? ? ? ? ? />
? ? ? ? ? </el-select>
? ? ? ? </template>
? ? ? ? <!-- 其它表單項同理 -->
? ? ? ? <template v-if="item.suffix">
? ? ? ? ? <span class="suffix">{{ item.suffix }}</span> ?--后置
? ? ? ? </template>
? ? ? </div>
? ? ? <div class="form-item-unit" v-if="item.unit">{{ item.unit }}</div> --單位
? ? </el-form-item>
? ? <div class="form-body" v-if="!$slots.default">
? ? ? <slot></slot>
? ? </div>
? ? <div class="form-footer" v-if="$slots.footer">
? ? ? <slot name="footer"></slot>
? ? </div>
? ? <div class="form-footer" v-else>
? ? ? <el-form-item>
? ? ? ? <el-button type="primary" @click="onSubmit" v-if="showSubmitButton">提交</el-button>
? ? ? ? <el-button @click="onCancel" v-if="showCancelButton">取消</el-button>
? ? ? </el-form-item>
? ? </div>
? </el-form>
</template>
<script>
export default {
? props: {
? ? formList: {
? ? ? type: Array,
? ? ? required: true,
? ? },
? ? formData: {
? ? ? type: Object,
? ? ? default: () => ({}),
? ? },
? ? actionUrl: {
? ? ? type: String,
? ? ? required: true,
? ? },
? ? showSubmitButton: {
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? ? showCancelButton: {
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? },
? methods: {
? ? handleChange(prop, value) {
? ? ? this.$emit('update:formData', {
? ? ? ? ...this.formData,
? ? ? ? [prop]: value,
? ? ? });
? ? },
? ? onSubmit() {
? ? ? this.$refs.form.validate((valid) => {
? ? ? ? if (valid) {
? ? ? ? ? this.$axios.post(this.actionUrl, this.formData).then((res) => {
? ? ? ? ? ? this.$emit('submit-success', res);//回調(diào)
? ? ? ? ? });
? ? ? ? } else {
? ? ? ? ? this.$message.error('請檢查表單是否填寫正確');
? ? ? ? }
? ? ? });
? ? },
? ? onCancel() {
? ? ? this.$emit('cancel');
? ? },
? },
};
</script>
<style>
.form-item-container {
? position: relative;
? display: inline-block;
}
.prefix,
.suffix {
? position: absolute;
? top: 50%;
? transform: translateY(-50%);
? font-size: 14px;
}
.prefix {
? left: 8px;
}
.suffix {
? right: 8px;
}
.form-item-unit {
? display: inline-block;
? margin-left: 8px;
? color: #909399;
}
.form-body {
? margin-bottom: 20px;
? border: 1px solid #e4e7ed;
? border-radius: 4px;
? padding: 20px;
}
.form-footer {
? text-align: right;
? margin-top: 20px;
}
</style>

<template>
? <div>
? ? <form-component
? ? ? :form-list="formList"
? ? ? :form-data="formData"
? ? ? :action-url="actionUrl"
? ? ? :show-submit-button="true"
? ? ? :show-cancel-button="true"
? ? ? @submit-success="onSubmitSuccess"
? ? ? @cancel="onCustomCancel"
? ? ? >
? ? ? <!-- 自定義表單內(nèi)容 -->
? ? ? <template #default>
? ? ? ? <el-form-item>
? ? ? ? ? <el-radio-group v-model="formData.gender">
? ? ? ? ? ? <el-radio label="male">男性</el-radio>
? ? ? ? ? ? <el-radio label="female">女性</el-radio>
? ? ? ? ? </el-radio-group>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item>
? ? ? ? ? <el-cascader
? ? ? ? ? ? v-model="formData.address"
? ? ? ? ? ? :options="addressOptions"
? ? ? ? ? ? placeholder="請選擇地址"
? ? ? ? ? ? @change="handleChange('address', formData['address'])"
? ? ? ? ? />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item>
? ? ? ? ? <el-input
? ? ? ? ? ? v-model="formData.email"
? ? ? ? ? ? placeholder="請輸入電子郵箱"
? ? ? ? ? ? clearable
? ? ? ? ? ? @change="handleChange('email', formData['email'])"
? ? ? ? ? />
? ? ? ? </el-form-item>
? ? ? </template>
? ? ? <!-- 自定義底部按鈕，也可以不添加，使用默認底部按鈕 -->
? ? ? <template #footer>
? ? ? ? <el-button type="primary" @click="onCustomSubmit">提交</el-button>
? ? ? ? <el-button @click="onCustomCancel">取消</el-button>
? ? ? </template>
? ? </form-component>
? </div>
</template>
<script>
import FormComponent from './FormComponent.vue';
export default {
? components: {
? ? FormComponent,
? },
? data() {
? ? return {
? ? ? formList: [
? ? ? ? {
? ? ? ? ? label: '姓名',
? ? ? ? ? prop: 'name',
? ? ? ? ? type: 'input',
? ? ? ? ? placeholder: '請輸入姓名',
? ? ? ? ? clearable: true,
? ? ? ? ? maxlength: 20,
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '性別',
? ? ? ? ? prop: 'gender',
? ? ? ? ? type: 'select',
? ? ? ? ? placeholder: '請選擇性別',
? ? ? ? ? clearable: true,
? ? ? ? ? options: [
? ? ? ? ? ? {
? ? ? ? ? ? ? label: '男性',
? ? ? ? ? ? ? value: 'male',
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? label: '女性',
? ? ? ? ? ? ? value: 'female',
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '地址',
? ? ? ? ? prop: 'address',
? ? ? ? ? type: 'cascader',
? ? ? ? ? placeholder: '請選擇地址',
? ? ? ? ? clearable: true,
? ? ? ? ? options: [],
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '電子郵箱',
? ? ? ? ? prop: 'email',
? ? ? ? ? type: 'input',
? ? ? ? ? placeholder: '請輸入電子郵箱',
? ? ? ? ? clearable: true,
? ? ? ? ? maxlength: 50,
? ? ? ? },
? ? ? ],
? ? ? formData: {
? ? ? ? name: '',
? ? ? ? gender: '',
? ? ? ? address: [],
? ? ? ? email: '',
? ? ? },
? ? ? addressOptions: [
? ? ? ? {
? ? ? ? ? value: 'beijing',
? ? ? ? ? label: '北京',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? value: 'haidian',
? ? ? ? ? ? ? label: '海淀區(qū)',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'zizhuqiao',
? ? ? ? ? ? ? ? ? label: '紫竹橋',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'xizhimen',
? ? ? ? ? ? ? ? ? label: '西直門',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? value: 'chaoyang',
? ? ? ? ? ? ? label: '朝陽區(qū)',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'guomao',
? ? ? ? ? ? ? ? ? label: '國貿(mào)',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'cbd',
? ? ? ? ? ? ? ? ? label: 'CBD',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ? {
? ? ? ? ? value: 'shanghai',
? ? ? ? ? label: '上海',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? value: 'xuhui',
? ? ? ? ? ? ? label: '徐匯區(qū)',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'xujiahui',
? ? ? ? ? ? ? ? ? label: '徐家匯',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? value: 'pudong',
? ? ? ? ? ? ? label: '浦東新區(qū)',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? value: 'lujiazui',
? ? ? ? ? ? ? ? ? label: '陸家嘴',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? },
? ? ? ],
? ? ? actionUrl: '/api/submit-form',
? ? };
? },
? methods: {
? ? onCustomSubmit() {
? ? ? // 自定義提交按鈕的點擊事件
? ? },
? ? onCustomCancel() {
? ? ? // 自定義取消按鈕的點擊事件
? ? },
? ? onSubmitSuccess(res) {
? ? ? // 表單提交成功的回調(diào)函數(shù)
? ? },
? },
};
</script>