vue2 element ui 布局模版 elementui页面布局器

目录

一、实现数据的分页效果

二、实现用户状态的修改

三、实现搜索功能

四、实现添加用户功能

4.1 点击按钮弹出添加用户的对话框

4.2在对话框中渲染一个添加用户的表单

4.3 实现自定义规则校验输入内容

4.4 实现添加表单的重置功能

4.5  添加用户前的预校验功能

4.6 发起请求添加一个新用户

五、用户修改的操作

  5.1根据ID查询用户信息

 5.2绘制修改用户的表单

5.3    修改表单关闭之后的重置操作

5.4  提交表单之前的预验证功能

5.5  提交修改用户请求

---

一、实现数据的分页效果

我们用这个功能比较全的分页组件

<!-- 分页区域 -->
            <!--  @size-change="handleSizeChange"  -->
            <!-- @current-change="handleCurrentChange" 在当前页改变的时候，触发handleCurrentChange -->
            <!-- :page-sizes="[1, 2, 5,10 ]"   每页可以显示1 2 5 10 具体多少可以根据我们自己选 -->
            <!-- :page-size是一个数组 -->
            <!-- :page-size="queryInfo.page-size"  当前每页显示多少条数据 -->
            <!-- layout="total, sizes, prev, pager, next, jumper"  layout指定页面上展示什么功能组件
              total展示一共多少条  sizes展示每页显示多少条的一个下拉菜单 -->
              <!-- :total="total">  绑定我们有多少条数据 -->
            <el-pagination
                @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5,10 ]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

<script>
export default {
    name:"Users",
    data(){
        return{
            queryInfo:{
                query:'',
                // 当前的页数
                pagenum:1,
                // 每页显示多少条数据 默认每页显示两条
                pagesize:2,
            },
         userList:[],
        //  总数据条数
         total:0
        }
    },
    created(){
    //   每当组件创建成功时就初始化用户界面
    this.getUserList()
    },
    methods:{
       async getUserList(){
        // 使用axios发起get请求
         const {data:res}  =  await this.$http.get('users',{params:this.queryInfo})
         if(res.meta.status !==200) 
           return this.$message.error('获取用户列表失败！')
 
         this.userList = res.data.users
         this.total = res.data.total
        },
 
        // 监听pagesize改变的事件
        handleSizeChange(newSize){
            // 这个pagesize就是空值每页显示多少条的
          this.queryInfo.pagesize = newSize
        //   当我们重新设置了每页显示多少条之后，我们可以重新发起一个请求获取数据来渲染页面
          this.getUserList()
        },
 
        // 监听页码值改变的事件
        handleCurrentChange(newPage){
            // 这个地方也是同理
           this.queryInfo.pagenum = newPage
           this.getUserList()
        }
    }
}
</script>

二、实现用户状态的修改

在上一篇的内容中我们实现了状态添加开关，但是没有到数据库中进行保存，我们刷新之后又恢复到原来的内容了

 

我们再switch开关上面添加一个@change的函数，这个是Element-UI文档中的，我们只需要定义后面的函数参数就可以了，然后将scope.row参数传入到里面

<el-table-column  label="状态" prop="mg_state">
                    <!--@change  是文档中规定的switch状态发生变化时的回调函数  -->
                    <template slot-scope="scope" >
                       <!-- {{scope.row}} 这个是这一行的数据 包括姓名、邮箱、状态等等 -->
                       <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                      </el-switch>

                    </template>
                </el-table-column>

// 监听switch开关状态的改变
       async userStateChanged(userinfo){
        //    console.log(userinfo)
          const {data:res} =  await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
        
           if(res.meta.status !==200){
            // 因为我们更新失败了 如果本来是关着的，你点了一下然后失败了 此时按钮应该还是关着的，但是因为你刚刚点击打开了
            // 这显然不符合实际，所以我们再取反，相当于恢复原来的位置
            userinfo.mg_state =!userinfo.mg_state
            return this.$message.error('更新用户状态失败')
           }
           this.$message.success('更新用户状态成功！')
        }

三、实现搜索功能

getUserList函数再我们初始化页面的时候就已经写完了

这个地方后端应该是做了一个模糊查询，根据某一点的内容来搜索内容，我们双向绑定的是queryInfo.query属性，然后当我们点击搜索按钮的时调用getUserList回调函数发起请求，最终我们得到数据返回到页面上

我们下input文本框上还有一个clearable属性，这个的目的就是让文本框的最右侧有一个x，我们点一下之后，整个文本框就会清空

@clear="getUserList"  @clear的作用就是在发生清空文本框的时候，会执行一个getUserList函数来渲染用户列表

<!-- 第一列 :span="7"指定宽度  一共24一行 -->
                <el-col :span="10">
                    <!-- 给搜索框做双向数据绑定 -->
                   <el-input clearable @clear="getUserList" v-model="queryInfo.query" placeholder="请输入内容">
                    <!-- 给搜索按钮绑定单击事件 -->
                     <el-button @click="getUserList" slot="append" icon="el-icon-search"></el-button>
                   </el-input>
                </el-col>

async getUserList(){
        // 使用axios发起get请求
         const {data:res}  =  await this.$http.get('users',{params:this.queryInfo})
         if(res.meta.status !==200) 
           return this.$message.error('获取用户列表失败！')

         this.userList = res.data.users
         this.total = res.data.total
        },

最终效果图：当我们点击文本框最右侧的x时，我们的页面的内容会展示全部的内容

四、实现添加用户功能

4.1 点击按钮弹出添加用户的对话框

依然使用Element-UI中的组件

 

我们在添加用户按钮上定义一个鼠标单击事件，当点击按钮之后，让我们自定义的属性 addDialogVisible为true，代表显示对话框

<el-button @click="addDialogVisible=true" type="primary">添加用户</el-button>

下面就是对话框的代码

<!-- 添加用户的对话框 -->
            <!-- title 是对话框最上面的标题  :visible.sync控制对话框的显示和隐藏-->
            <!-- width设置对话框的宽度   :before-close 这是一个事件，在对话框关闭之前一般会触发一个函数 -->
            <el-dialog
                title="提示"
                :visible.sync="addDialogVisible"
                width="50%">
                <!-- 内容主体区 -->
                <span>这是一段信息</span>

                <!-- 底部的按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <!--  @click="addDialogVisible = false" 当我们点击之后，将对话框隐藏 -->
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

效果图：这个对话框我们点击右上角的×可以关闭，取消也可以关闭，单击出对话框以外的内容也可以关闭

 

4.2在对话框中渲染一个添加用户的表单

我们也可以复习一下我们之前写过的表单验证：

<!-- 添加用户的对话框 -->
            <!-- title 是对话框最上面的标题  :visible.sync控制对话框的显示和隐藏-->
            <!-- width设置对话框的宽度   :before-close 这是一个事件，在对话框关闭之前一般会触发一个函数 -->
            <el-dialog
                title="提示"
                :visible.sync="addDialogVisible"
                width="50%">
                <!-- 内容主体区 -->
                <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                   
                    <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>

                <!-- 底部的按钮区 -->
                <span slot="footer" class="dialog-footer">
                    <!--  @click="addDialogVisible = false" 当我们点击之后，将对话框隐藏 -->
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

//  添加用户的表单数据
        addForm:{
            username:'',
            password:'',
            email:'',
            mobile:''

        },
        // 添加表单的验证规则对象
        addFormRules:{
            username:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:3,max:10,message: '长度在 3 到 10 个字符', trigger: 'blur'}
            ],
            password:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入密码',trigger:'blur'},
                {min:6,max:15,message: '长度在 6 到 15 个字符', trigger: 'blur'}
            ],
            email:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入邮箱',trigger:'blur'},
            ],
            mobile:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入手机号',trigger:'blur'},
            ],
        }

 

4.3 实现自定义规则校验输入内容

data(){
        // 验证邮箱的规则   cb是一个回调函数
        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=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            if(regMobile.test(value)){
                return cb()
            }
            cb(new Error('请输入合法的手机号码'))
        }

}

 

email:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入邮箱',trigger:'blur'},
                // 自定义验证
                {validator:checkEmail,trigger:'blur'}
            ],
            mobile:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入手机号',trigger:'blur'},
                // 自定义验证
                {validator:checkMobile,trigger:'blur'}
            ],
        }

当然我们除了这一种方法，我们也开可以直接在规则找那个添加一个正则表达式，这两种方式都是可以的，想用哪种用哪种，下面这种比较方便

email:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入邮箱',trigger:'blur'},
                // 自定义验证
                // {validator:checkEmail,trigger:'blur'}
                {pattern:/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,message:'请输入正确的邮箱',trigger:'blur'}
            ],

效果图：

 

4.4 实现添加表单的重置功能

我们什么时候对表单进行重置操作？

    当我们关闭表单（在这里其实是对话框）之后进行重置操作

  注意这个地方是@close，在对话框关闭之后执行

<el-dialog
                @close="addDialogClosed"
                title="提示"
                :visible.sync="addDialogVisible"
                width="50%" >

表单的ref属性值是addFormRef

<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">

 编写@close回调函数

// 监听添加用户对话框的关闭事件
        addDialogClosed(){
            // 获取表单
           this.$refs.addFormRef.resetFields()
        }

4.5  添加用户前的预校验功能

那我们什么时候进行校验功能呢？

    在我们点击确认按钮的时候，绑定一个单击事件，然后对我们填写的内容进行预验证，如果验证不通过的话会依然停留在对话框阶段

<el-button type="primary" @click="addUser">确 定</el-button>

// 添加用户操作
        addUser(){
            // 获取表单
            this.$refs.addFormRef.validate(valid=>{
                console.log(valid)
                if(!valid){
                    // 校验没有通过
                    return
                }
                // 校验通过了可以发送AJAX请求

            })
        },

 

效果：此时输出的结果是false

4.6 发起请求添加一个新用户

 

// 添加用户操作
        addUser(){
            // 获取表单
            this.$refs.addFormRef.validate(async valid=>{
                console.log(valid)
                if(!valid){
                    // 校验没有通过
                    return
                }
                // 校验通过了可以发送AJAX请求
                const {data:res}= await this.$http.post('users',this.addForm)
                if(res.meta.status !==201){
                    this.$message.error('添加用户失败！')
                }
                this.$message.success('添加用户成功！')

                // 添加成功后隐藏对话框
                this.addDialogVisible=false
                this.getUserList()
            })
        },

 

 

 

五、添加用户修改的操作

我们使用这个基本用法的对话框

<!-- 修改按钮 -->
<el-button @click="showEditDialog()"  size="mini" type="primary" icon="el-icon-edit">  </el-button>

<!-- 修改用户的对话框 -->
            <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%">
                <span>这是一段信息</span>

                <!-- 对话框角 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible= false">取 消</el-button>
                    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                </span>
             </el-dialog>

 

// 展示编辑用户的对话框
        showEditDialog(){
          this.editDialogVisible = true
        }

 

  5.1根据ID查询用户信息

 

将函数改为下面的形式，并且带data中添加一个editForm属性

<!-- 修改按钮 -->
<el-button @click="showEditDialog(scope.row.id)"  size="mini" type="primary" icon="el-icon-edit">  </el-button>

// 查询到的用户信息对象
        editForm:{},

// 展示编辑用户的对话框
        async showEditDialog(id){
            // 打开编辑用户的对话框
          this.editDialogVisible = true

          const{data:res} = await this.$http.get('users/'+id)
          if(res.meta.status !==200)
            return this.$message.error('查询用户信息失败')
          this.editForm = res.data

        }

通过上面的样子我们就可以获取到用户信息了

 5.2绘制修改用户的表单

<el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%">

                <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                  
                    <el-form-item label="用户名">
                        <!-- disabled 代表禁用，不能改 -->
                      <el-input disabled v-model="editForm.username"></el-input>
                   </el-form-item>

                   <el-form-item label="邮箱" prop="email">
                      <el-input  v-model="editForm.email"></el-input>
                   </el-form-item>

                   <el-form-item label="电话" prop="mobile">
                      <el-input  v-model="editForm.mobile"></el-input>
                   </el-form-item>



                </el-form>

                <!-- 对话框底部 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible= false">取 消</el-button>
                    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
                </span>

             </el-dialog>

editFormRules:{
            email:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入邮箱',trigger:'blur'},
                // 自定义验证
                {validator:checkEmail,trigger:'blur'}
            ],
            mobile:[
                // trigger:'blur'失去焦点后开始验证
                {required:true,message:'请输入手机号',trigger:'blur'},
                // 自定义验证
                {validator:checkMobile,trigger:'blur'}
            ],
        }

 

5.3    修改表单关闭之后的重置操作

添加@close事件，在表单关闭之后执行回调函数,当我们在编写者一半关闭后再打开，页面展示的就是还是数据库中的内容

<!-- 修改用户的对话框 -->
            <el-dialog
                 @close="editDialogClosed"
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%">

// 修改用户对话框关闭之后重置表单内容
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        }

5.4  提交表单之前的预验证功能

我们在确定按钮上面进行绑定

<el-button  type="primary" @click="editUserInfo">确 定</el-button>

// 提交修改用户的预验证功能
        editUserInfo(){
            this.$refs.editFormRef.validate(valid=>{
                console.log(valid)
            })
        }

 

5.5  提交修改用户请求

 

// 提交修改用户的预验证功能
        editUserInfo(){
            this.$refs.editFormRef.validate( async valid=>{
                // console.log(valid)
                if(!valid)
                   return
                 const {data:res} =  await this.$http.put('users/'+this.editForm.id,{
                    email:this.editForm.email,
                    mobile:this.editForm.mobile
                })
                
                if(res.meta.status !==200){
                    return this.$message.error('更新用户信息失败')
                }

                // 关闭对话框
                this.editDialogVisible = false
                // 更新列表
                this.getUserList()
                // 提示修改成功
                this.$message.success('更新用户信息失败')
            })
        }