携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言

这是一个为最高管理权限的管理员设置的修改其他用户信息的表单，我认为其亮点在于修改密码这里，若没有修改密码需求，则“确认密码”是处于锁定状态的，且“确认密码”会绕过表单验证，不影响最终提交。本文对“密码”和“确认密码”来着重讨论

我现在是离线在跑这个，正常部署在服务器后会获取一下信息再填入该表单中，给用户呈现的是已经填好的表单，只用修改需要的项就可以

代码介绍

将在下方将template与script分开介绍

template内容

    <el-dialog title="修改" :visible.sync="dialogVisible" width="28%" :before-close="handleClose">
        <el-form ref="form[0]" :model="form[0]" label-width="100px" v-loading="loading" :rules="rules">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="form[0].userName"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="form[0].realName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="form[0].password" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="form[0].checkPass" autocomplete="off" show-password
                    :disabled="changePassword" placeholder="若有更改密码需求，则需要填写该项"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="form[0].sex" label="男">男</el-radio>
                <el-radio v-model="form[0].sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
                <el-date-picker v-model="form[0].birth" type="date" placeholder="单击上方年月以快速选择"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用户类别" prop="userType">
                <el-radio v-model="form[0].userType" :label="0">管理员</el-radio>
                <el-radio v-model="form[0].userType" :label="1">经理</el-radio>
                <el-radio v-model="form[0].userType" :label="2">普通用户</el-radio>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('form[0]')">提交</el-button>
                <el-button @click="closeModify">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

• 外部容器el-dialog是一个弹出框，如果不需要可以去掉，这个是需要受一个变量控制的，在el-form中加入:rules并传参是为了使用ElementUI自带的表单验证功能，这个需要:rule和el-form-item中的:prop一起配合使用，详情戳：element.eleme.cn/#/zh-CN/com…

script内容

export default {
        name: 'Modify',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.form[0].checkPass !== '') {
                        this.$refs['form[0]'].validateField('checkPass');           //
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if(!(this.changePassword)){
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.form[0].password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                }else{
                    callback();
                }
            };
            return {
                changePassword: true,
                dialogVisible: false,
                form: [{
                    userId: '',
                    userName: '',
                    realName: '',
                    sex: '',
                    birth: '',
                    userType: '',
                    password: '123',
                    checkPass: ''
                }, ],
                pass:'',
                loading: false,
                rules: {
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    realName: [{
                        required: true,
                        message: '请输入用户真实姓名',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'blur'
                    }],
                    birth: [{
                        required: true,
                        message: '请输入日期',
                        trigger: 'blur'
                    }],
                    pass: [{
                        required: true,
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    checkPass: [{
                        required: true,
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    userType: [{
                        required: true,
                        message: '请选择用户类别',
                        trigger: 'blur'
                    }]

                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                }
            }
        },
        watch: {
            form: {
                deep: true,
                handler: function (old, value) {
                    if (this.form[0].password != this.pass) {
                        this.changePassword = false
                    } else if (this.form[0].password == this.pass) {
                        this.changePassword = true
                    }
                },
            }
        },
        computed: {
            userAccess() {
                let userType = this.$store.state.userType
                if (userType == 0) {
                    return false
                } else if (userType == 1) {
                    return true
                } else if (userType == 2) {
                    return true
                }
            }
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        this.loading = true
                        this.$axios.post('/user/updateUser', JSON.stringify(this.form[0]), {
                            headers: {
                                "Content-Type": "application/json;charset=utf-8"
                            }
                        }).then(
                            response => {
                                this.loading = false
                                if (response.data == 1) {
                                    this.$message({
                                        message: '编辑成功',
                                        type: 'success'
                                    });
                                    this.closeModify()
                                    this.$bus.$emit('toSearch')
                                    this.form = [{
                                        userName: '',
                                        realName: '',
                                        sex: '',
                                        birth: '',
                                        userType: '',
                                    }]
                                } else {
                                    this.$message({
                                        message: '编辑失败',
                                        type: 'error'
                                    });
                                }
                            },
                            error => {
                                this.loading = false
                                this.$message(error.message);
                            }
                        )
                    }
                });

            },
            closeModify() {
                this.dialogVisible = false
            },
            openModify() {
                this.dialogVisible = true

            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            emitServer(userId) {
                this.loading = true

                this.$axios.get('/user/detailUser', {
                    params: {
                        userId: userId
                    }
                }).then(
                    response => {
                        this.loading = false
                        this.form = response.data
                        this.pass = response.data[0].password

                        this.$set(this.form[0],'checkPass','')
                    },
                    error => {
                        this.loading = false

                    }
                )
            },
        },
        mounted() {
            this.$bus.$on('toModify', userId => {
                this.openModify()
                this.emitServer(userId)
            })
        },
        beforeDestroy() {
            this.$bus.$off('toModify')
        },
    }

• 注意在emitServer函数中，this.$set是必须的，Vue无法检测到函数中的每一项的变化，若直接赋值将不会产生自动更新页面的效果。
• data配置项中的validatePass与validatePass2是用来自定义表单验证规则的，提前设置好验证规则并在data的返回之中供rules使用，这个是官网的示例改来的。validatePass2加入了一个判断，如果用户修改了“密码”项，则加入表单验证，反之则不进入表单验证
• watch配置项中的form是实现更改“密码”项后解锁“确认密码”项的配置项，开启深度监视来检测“密码”是否被修改，当发现密码变动后将changePassword变量设为false以解锁“确认密码”。
• computed中的userAccess是用来判断用户类型的，用来给“用户类型”渲染（因为我们这服务器传过来的用户类型是0 1 2，我在vuex中存的用户类型也是0 1 2，用来权限判断，但是似乎使用vuex来做权限判断这种方式并不安全）。
• methods中onSubmit是用来向服务器发送表单的，在发送之前会先启动表单验证。在编辑程功后的一些东西是一些别的工作，让表单重新请求一下新的数据同时保持搜索框内容。
• methods中closeModify与openModify是用来控制el-dialog开关的，不适用弹出框的可以去掉
• methods中handleClose用来在用户想要关闭弹出框时进行阻止并弹出确认框来确认用户是否真的是想要这么做
• methods中emitServer用于激活该弹出框时根据userId向服务器发送一次请求以获取该id所对应的用户信息并添加至表单中
• mounted与beforeDestroy用户挂载或卸载全局事件总线，主要功能就是开启或关闭el-dialog弹窗