validator: 校验方法(在data中定义)
data() { // 验证邮箱的规则 var checkEmail = (rule, value, cb) => { // 验证邮箱的正则表达式 const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if (regEmail.test(value)) { // 合法的邮箱 return cb() } cb(new Error(\'请输入合法的邮箱\')) } // 验证手机号的规则 var checkMobile = (rule, value, cb) => { // 验证手机号的正则表达式 const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ if (regMobile.test(value)) { return cb() } cb(new Error(\'请输入合法的手机号\')) } return { // 添加表单的验证规则对象 addFormRules: { email: [ { required: true, message: \'请输入邮箱\', trigger: \'blur\' }, { validator: checkEmail, trigger: \'blur\' } ], mobile: [ { required: true, message: \'请输入手机号\', trigger: \'blur\' }, { validator: checkMobile, trigger: \'blur\' } ] } } }增加@close事件关闭的时候resetFields()
添加用户的步骤 校验 -> 调用API -> 判断status -> $message -> 隐藏对话框 -> 重新获取用户数据
七. 自己写遇到的错误 7.1 input不能填写要添加双向绑定之后才能填入
form中的model属性是方便提取表单数据而用的?
为了resetFields()而绑定model
而resetFields()要有prop属性才会生效
而有rules才会有错误信息显示
7.2 字体图标可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
7.3 rules的使用form绑定rules
form-item绑定rulse的值
7.4 if (!valid) return 有eslint报错解决方法
if (!valid) return false
7.5 collapse问题无法获得this.$refs.homeMenu.isCollapse?
解决方法:
$emit的时候并把Home.vue也设置一个isCollapase
7.6 服务器上做接口问题需要配置config对应的host(ip)属性
云服务器上的nodejs可以用localhost访问云服务器上的数据库(同一IP)
所有操作都需要放行端口, 宝塔与阿里云要同时放行
7.7 使用table组件自定义表头
去掉prop属性
添加v-slot="自定义名字"
后面引用的时候要用.row不然报错
表格边框不对齐