超长表单分页校验,下一页和上一页功能

父组件(最外层)

<script>
import PageOne from './pageOne';
import PageTwo from './pageTwo';
import PageThree from './pageThree';
import PageFour from './pageFour';
import PageFive from './pageFive';
 
const compsInfo = {
    pageOne: {
        compId: 'pageOne', label: '第一页', status: 'process', index: 1,
    },
    pageTwo: {
        compId: 'pageTwo', label: '第二页', status: 'process', index: 2,
    },
    pageThree: {
        compId: 'pageThree', label: '第三页', status: 'process', index: 3,
    },
    pageFour: {
        compId: 'pageFour', label: '第四页', status: 'process', index: 4,
    },
    pageFive: {
        compId: 'pageFive', label: '第五页', status: 'process', index: 5,
    },
};
 
const steps = Object.values(compsInfo).sort((a, b) => a.index - b.index);
export default {
    components: {
        PageOne,
        PageTwo,
        PageThree,
        PageFour,
        PageFive,
 
    },
    props: {},
    data() {
        return {
            currentComponentIndex: 0,
            entireData: {
                // 第一页数据
                pageOne: {
                    name: '',
                    region: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                // 第二页数据
                pageTwo: {
                    name: '',
                    region: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                // 第三页数据
                pageThree: {
                    name: '',
                    region: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                // 第四页数据
                pageFour: {
                    name: '',
                    region: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                // 第五页数据
                pageFive: {
                    name: '',
                    region: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
            },
        };
    },
    computed: {
        steps() {
            // 第一页
            if (this.currentComponentIndex === 0) {
                return steps;
            } else {
                // 如果存在内容信息页，则过滤掉steps中内容信息部分
                return steps;
            }
        },
        nextStepButtonName() {
            return '下一步';
        },
        // 下一个组件
        currentComponent() {
            return this.steps[this.currentComponentIndex] &&             
                   this.steps[this.currentComponentIndex].compId;
        },
    },
    methods: {
        // 上一步
        pre() {
            this.currentComponentIndex -= 1;
            this.steps[this.currentComponentIndex].status = 'process';
        },
        // 下一步
        async next() {
            // 第一页
            if (this.currentComponentIndex + 1 === 1) {
                await this.$refs.pageOne.pageOneSubmitForm();
            }
            // 第二页
            if (this.currentComponentIndex + 1 === 2) {
                await this.$refs.pageTwo.pageTwoSubmitForm();
            }
            // 第三页
            if (this.currentComponentIndex + 1 === 3) {
                await this.$refs.pageThree.pageThreeSubmitForm();
            }
            // 第四页
            if (this.currentComponentIndex + 1 === 4) {
                await this.$refs.pageFour.pageFourSubmitForm();
            }
            // 第五页
            if (this.currentComponentIndex + 1 === 5) {
                await this.$refs.pageFive.pageFiveSubmitForm();
            }
 
            // 下一步 要标记为完成
            this.steps[this.currentComponentIndex].status = 'success';
            this.currentComponentIndex += 1;
        },
        // 暂存  调接口把entireData传给接口即可
        save() {
 
        },
        // 提交  调接口把entireData传给接口即可
        onSubmit() {
 
        },
    },
};
script>
<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 10px 0;
    background-color: #eee;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-sizing: content-box;
}
style>

第一页的子组件   

<script>
export default {
    props: {
        entireData: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            ruleForm: this.entireData.pageOne,
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {
                        min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur',
                    },
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' },
                ],
 
                type: [
                    {
                        type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
                    },
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' },
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        pageOneSubmitForm(formName = 'ruleForm') {
            return new Promise((resolve) => {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        resolve(true);
                    } else {
                        return false;
                    }
                });
            });
        },
    },
};
script>
<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 10px 0;
    background-color: #eee;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-sizing: content-box;
}
style>

第二页-第五页和第一页结构一样. 只有(数据: ruleForm: this.entireData.pageOne)和(方法pageOneSubmitForm ) 这两个地方不一样, 稍微改一下就行.这里就不贴代码了. 

其他的地方可以根据自己的需求改.