Vue从零开始开发管理系统（学习笔记第九节）

一、实现搜索功能

在card中添加栅格系统(Layout 布局)

<el-row :gutter="20">
    <el-col :span="8">
    </el-col>
</el-row>

在栅格系统中添加input和button组合组件

                    <el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList">
                        <el-button @click="getUserList" slot="append" icon="el-icon-search"></el-button>
                    </el-input>

 

二、实现添加用户

1.添加dialog组件

<el-dialog title="添加" :visible.sync="isVisible " width="40%">
<span>
//添加用户的表单
</span>
<span slot="footer">
    <el-button @click="isVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser()">确 定</el-button>
</span>
</el-dialog>

2.添加用户的表单

<el-form :model="addForm" :rules="addRul" ref="addRef" label-width
    <el-form-item label="用户名:" prop="username">
        <el-input v-model="addForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码:" prop="password">
        <el-input v-model="addForm.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱:" prop="email">
        <el-input v-model="addForm.email"></el-input>
    </el-form-item>
    <el-form-item label="电话:" prop="mobile">
        <el-input v-model="addForm.mobile"></el-input>
    </el-form-item>
</el-form>  

data(){
    return{
            addForm:{
                username:"",
                password:"",
                email:"",
                mobile:""
            },
        }
    }

用正则表达式自定义校验规则

data() {
    var checkEmail=(rule,value,callback)=>{
        const emailrule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/
        if(!emailrule.test(value)) {
            return callback(new Error('邮箱格式错误'))
        }
        callback();
    };
    var checkMobile=(rule,value,callback)=>{
        const mobilerule = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
        if(!mobilerule.test(value)) {
            return callback(new Error('电话格式错误'))
        }
        callback();
    };

---

总结