小案例学 Vue 之更新行数据

前言

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战。恰逢掘金八月更文挑战，通过前几天更新的小案例理解何为 Vue 组件、插槽 (juejin.cn) 博文，想必大家对与 component 和 slot 有一定的了解了，今天给大伙儿分享的是通过点击列表栏功能按钮修改行数据，不仅用到了组件和插槽还结合了我这篇 Blog Vue 实现用户注册，前端正则校验以及密码强度实时显示 (juejin.cn)，希望通过这个小案例帮助到正在学习 Vue 的小伙伴。加油，共勉！

页面效果展示

动画.gif

需求分析

首先，进入用户信息管理列表，就获取用户注册的所有信息数据，并通过数据表格动态渲染出来，每一个用户独占一行，并且根据用户 id 号给定固定的序号。
其次，表格的最后一列作为操作列，通过按下修改按钮，隐藏数据表格，将该行数据填充到可修改表单上，自动计算年龄以及渲染密码强度等级，此时，用户可以根据需要对表单中的原始数据进行修改了，修改完成后，点击确认修改完成修改操作，在成功完成修改行数据之前，必须得通过表单验证，否则提交不成功！
最后，可通过确认修改完成对行数据的一次更新，重新进入到用户信息管理列表，就能看到已经被修改的用户信息数据了；如若中途修改过程中不想再继续进行修改操作了，可以点击返回按钮，重回管理列表页面，再次确认修改目标，进行下一次修改。

代码实现

复用部分

用户信息管理列表如何实现不再赘述，要想获取具体代码点击这里。

更新数据表单代码，具体可翻阅我以往的博文，可照搬传送门。

唯一不同，都是在外层套一个 div 并通过 v-if 绑定一个变量 showFlag，用来判断是否显示所有可供修改的用户信息。

<div id="updUserInfoTable" v-if="!showFlag">
    <table> {...} </table>
</div>

Vue 核心代码

数据绑定部分

data: {
    showFlag: true,
    users: [],
    targetUser: null,
    msg: null
}

showFlag => 是否显示所有可供修改的用户信息
users => 存放用户信息的数组
targetUser => 要修改的目标用户对象

方法定义部分

showTargetUserInfo: function (index) {
    // 开始更新用户信息
    this.showFlag = false;
    // 当前序号
    var num = index.valueOf();
    this.targetUser = this.users[num];
    this.$nextTick(function () {
        this.msg = null;
        // 显示修改前密码安全强度
        this.strengthShow();
    });
}

showTargetUserInfo() 方法用于显示指定行用户信息，由于表单绑定到了 targetUser 对象属性，被赋值之后，立马显示对应属性名的属性值，完成修改表单的赋值。

注意：

v-if 切换需要等待页面的重新渲染 DOM 对象，否则密码安全强度效果无法正常显示，根本原因在于 vue 中的 DOM 渲染是异步的。
使用 this.$nextTick 将回调延迟到下次 DOM 更新循环之后执行，此时，这个问题就迎刃而解了。

checkModify: function () {
    const emptyKey = isEmptyModify();
    switch (emptyKey) {
        case 'username':
            msgForUser('用户名不能修改为空！', emptyKey);
            break;
        case 'name':
            msgForUser('姓名不能修改为空！', emptyKey);
            break;
        case 'birthday':
            msgForUser('出生年月不能修改为空！', emptyKey);
            break;
        case 'mobile':
            msgForUser('手机号码不能修改为空！', emptyKey);
            break;
        case 'password':
            msgForUser('密码不能修改为空！', emptyKey);
            break;
        default:
            // 非空验证判断完毕，对电话号码的格式的正则验证
            if (!(/^1([345789])\d{9}$/.test(this.targetUser.mobile))) {
                this.msg = '手机号码格式有误！';
            } else if (this.targetUser.password.length < 6 || this.targetUser.password.length > 16) {
                this.msg = '密码长度必须在6-16位之间！'
            } else { 
                const updatedUser = this.targetUser;
                $.ajax({
                    type: 'POST',
                    url: '/user/updateUserInfo',
                    data: updatedUser,
                    success: function (data) {
                        handleUpdatedMsg(data);
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            }
    }
},

isEmptyModify() 方法判断表单是否为修改为空，是则返回对应的 key，结合 checkModify() 方法用于校验修改表单中的数据，验证不通过，根据键拿到对应表单对象，聚焦然后提醒用户修改更改内容。

验证通过之后，将更新用户信息请求到后端，完成更新操作。

function isEmptyModify() {
    const entries = Object.entries(vm.targetUser);
    var key = null;
    for (const [k, v] of entries) {
        if (v === null) {
            key = k;
            break;
        } else {
            if ((v.toString()).match(/^[ ]*$/)) {
                key = k;
                break;
            }
        }
    }
    return key;
}
// 进行表单判断，验证用户输入
function msgForUser(text, id) {
    vm.msg = text;
    const obj = $(`#${id}`);
    obj.focus();
}

完成修改操作后，返回修改结果信息，通过 vm.msg 赋值显示该信息，在 750 毫秒 后返回到用户信息管理列表吗，这里仅需将 vm.showFlag 重置为 true 即可。

到此，这个小案例就完成实现啦！是不是很简单呢？总的来说，这个案例基于我前面两篇文章而成，如果存在不懂之处，那么就要好好看看我前文提到的两篇博文哦~

结尾

撰文不易，欢迎大家点赞、评论，你的关注、点赞是我坚持的不懈动力，感谢大家能够看到这里！Peace & Love。