基于Ant Design vue框架之二修改页面细细拆分

最新推荐文章于 2024-01-09 10:55:26 发布

姑苏水墨

最新推荐文章于 2024-01-09 10:55:26 发布

阅读量988

点赞数 1

分类专栏：前端vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43967890/article/details/106426731

版权

前端vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

本文详细介绍了用户信息修改页面的设计与实现过程，包括页面布局、代码结构及交互流程。通过具体代码示例，展示了如何使用A-Modal组件创建弹窗，以及如何通过A-Form组件收集和验证用户输入，最后实现用户数据的更新。

摘要由CSDN通过智能技术生成

我们还是老规矩，先上效果图吧~~
在这里插入图片描述
需要看整个页面的小盆友可以点下面这个路径哈~~
页面路径：总页面展示

继续上干货吧~~~翠花，上代码~~~~

在这里插入图片描述

继续走修改的画面：

<a-modal
        title="用户信息修改页面"
        :width="640"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
    >
    <a-spin :spinning="confirmLoading">
        <a-form :form="form">
        <!-- step1 -->
        <div>
            <a-form-item label="用户编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['id']" disabled/>
            </a-form-item>
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['account']" />
            </a-form-item>
            <a-form-item label="用户身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['adminName']" />
            </a-form-item>
            <a-form-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['idCard']" />
            </a-form-item>
            <a-form-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['mobilePhone']" />
            </a-form-item>
            <a-form-item label="用户地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['address']" />
            </a-form-item>
        </div>
        <!-- step1 end -->
        </a-form>
    </a-spin>
    <template slot="footer">
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button
        key="forward"
        :loading="confirmLoading"
        type="primary"
        @click="handleNext(currentStep)"
        >确定</a-button>
    </template>
</a-modal>

在这里插入图片描述

edit(record) {
        this.visible = true
        const {
            form: { setFieldsValue }
        } = this
        this.$nextTick(() => {
            setFieldsValue(record)
        })
        },
        handleNext(step) {
        const {
            form: { validateFields }
        } = this
        // last step
        this.confirmLoading = true
        /**
        * @description  将from表单的数据进行传参并修改
        */
        validateFields((errors, values) => {
            console.log('errors:', errors, 'val:', values)
            if (!errors) {
            updateUser(values).then(res => {
                switch (res.code) {
                case 200:
                    this.$message.success('修改成功！')
                    this.$emit('ok', values)
                    this.visible = false
                    this.confirmLoading = false
                    break
                case 199:
                    this.$message.success('修改失败！')
                    break
            }
                    return res.data
            })
            }
        })
        },
        handleCancel() {
        // clear form & currentStep
        this.visible = false
        this.currentStep = 0
        }