今天继续完善用户列表内容，把一些交互的东西加上！
昨天呢，整个用户列表的UI布局已经完成，但是一些交互操作还没有写，比如说：添加用户、编辑（修改）用户信息、删除用户信息等内容。
1.添加用户
我们在点击“添加用户”按钮时，页面会立刻弹出一个窗口，这个就是Dialog对话框，其中对话框中的内容选择的是嵌套表单的Dialog,对话框主要就是在表单中放置了4个文本框和对应的label标签,我们可以直接从element官网拿来自定义校验规则的Form表单
整体思路是这样：当用户点击添加按钮时，立即弹出Dialog对话框，然后用户输入新添加的信息，每一个文本框都有对应的校验规则，通过好，文本框显示绿色，在所有信息填写完成后，点击提交，整个表单会再次验证以下，看是否有不合法的输入，如若无误，就会将表单信息提交给服务器，进行添加数据。
1.1 点击按钮弹出Dialog对话框
为了控制Dialog对话框的显示与消失，我们需要预先定义一个dialogFormVisible:false,Dialog中:visible.sync="dialogFormVisible"属性可以控制Dialog对话框的显示与消失
visible 在官方文档中的说明是：“是否显示Dialog，支持.sync修饰符”，visible实则是属性绑定，来表示弹出框是否隐藏或显示，值在data中进行返回，dialogFormVisible(本段代码中visible的值)为true时，弹框显示，为false时，弹框隐藏。
让我们再看代码 : visible.sync 这里的 .sync 是什么意思呢，官方给出的解释就是一种语法糖的意思
其实他的作用就是实现子组件修改父组件的属性的值 子组件触发了父组件的函数进行修改
注意：.sync 修饰符的 v-bind 不能和表达式一起使用（这又是个小细节）
之后，为添加用户按钮绑定事件,通过改变dialogFormVisible的值，来控制Dialog
添加用户 有一个小细节，就是在后面用户输入完信息提交成功后。我们需要在关闭对话框的同时，将表单的数据重置，避免下次打开还是上次的数据
需要用到Dialog的close()方法和Form的resetFields()方法
1.2 form表单的验证
form表单验证是实际项目中必不可少的一部分，只要用户输入信息，前端就必须要进行验证，确保传递给后端的数据是合法的，防止XSS攻击
首先需要了解form表单的几个重要属性：
model是表单数据对象，收集我们输入的数据rules表单验证规则
form-item也有几个重要属性：
prop是表单域model字段，在使用validate、resetFields方法时，时必须要写的属性（传入 Form 组件的 model 中的字段）rules表单验证规则
// 添加用户(编辑)的校验规则
addFormRules: {
username: [
{
required: true,
message: '请输入用户名称！',
trigger: 'blur',
},
],
password: [
{
required: true,
message: '请输入密码！',
trigger: 'blur',
},
],
email: [
{
required: true,
message: '请输入邮箱！',
trigger: 'blur',
},
//自定义校验email规则
{
validator: checkEmail,
trigger: 'blur',
},
],
mobile: [
{
required: true,
message: '请输入手机号！',
trigger: 'blur ',
},
//自定义校验mobile规则
{
validator: checkMobile,
trigger: 'blur',
},
],
},这里我们为email字段和mobile字段，增加了自定义的验证规则
// 自定义邮箱的验证
const checkEmail = (rule, value, callback) => {
let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
if (reg.test(value)) return callback()
callback(new Error('邮箱格式错误，请重新输入！'))
}
// 自定义手机号的验证
const checkMobile = (rule, value, callback) => {
let reg =
/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (reg.test(value)) return callback()
callback(new Error('手机号格式错误，请重新输入！'))
}
表单验证通过后，我们点击确定后，还需要总体再次验证一次，看是否有不合法的字段，如果没有问题，就直接提交给服务器，存储在数据库中！
validate()是form的默认事件，任一表单项被校验后会触发,作为向服务器发送数据前的最后一次校验,如果有错误，valid为false,否则为true
// 点击添加按钮，添加新用户
addUser() {
this.$refs.addFormRef.validate(async (valid) => {
// console.log(valid)
if (!valid) return
// 校验成功！可以发起请求
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status != 201)
this.$message.danger('添加用户失败 ，请重新尝试')
this.$message.success('添加用户成功')
this.dialogFormVisible = false
this.getUserList()
})
},2.编辑（修改）用户信息
原理其实和添加用户信息一致，只不过多了一个步骤，就是我们再点击编辑按钮弹出Dialog对话框时，会显示我们的用户信息，这个是需要我们提前向服务器请求获取的
scope是作用域插槽中定义一个对象(这里对象被定义为scope)来存储插槽上绑定的数据的用法
当前行数据的获取也会用到插槽,scope相当于一行的数据，scope.row相当于当前行的数据对象
根据数据对象的id向服务器请求数据，并将返回的数据存在editForm数组中，所以form表单就可以获取并显示对应的数据了。
async editUser(id){
this.dialogFormVisible2=true;
const {data:res}=await this.$http.get(`users/${id}`)
console.log(res.data)
this.editForm=res.data
},然后其他的步骤，和添加用户一致。
3.删除用户信息
删除用户信息，也是从作用域插槽scope中拿到id，然后提交给服务器，删除id对象的用户信息，
和上面都类似
这里主要说明以下MessageBox弹框组件，我们在删除信息时，不可能是当时点击就马上删除了，需要给用户二次考虑的机会，防止误点而删除，影响用户体验！
区分confim和prompt:confim是弹窗,点击确定或取消；而prompt弹窗带输入框，可输入数据
疑问，为什么MessageBox的使用不是
Vue.use()而选择的Vue.prototype.$confirm这里需要说明一下vue.prototype是在实例上挂载属性或者方法，而Vue.use()是引入插件，我们这里需要使用的是MessageBox的confirm()方法,所以直接定义成Vue.prototype.$confirm = MessageBox.confirm可以在全局使用，会很方便
// 删除用户单条数据
removeUser(id){
this.$confirm("确定删除吗？","提示",{
confirmButtontext:"确定",
cancelButtonText:"取消",
type:"warning"
}).then(async ()=>{
const {data:res}=await this.$http.delete(`users/${id}`)
// console.log(res)
if(res.meta.status!=200) this.$message.danger("删除用户失败！")
this.$message.success("删除成功")
this.getUserList()
}).catch(()=>{
this.$message.info("取消删除")
})
}