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

前言

---

一、在全局CSS中把组件Card的阴影去除

在assets/CSS的global.css文件中添加

.el-card{
    box-shadow: 0px 1px 1px rgb(0, 0, 0,0.15) !important;
}

二、获取用户列表 1.准备工作

在data数据中心新建一个列表，用于存储数据，在methods中写获取方法，将方法添加至created（）方法中。

data() {
    return {
        UserList:[],
        }
    };


methods:{
    async getUserList(){
        cosnt{data:res}= await this.$http.get('users')
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.UserList=res.data.users
        }

2.给get属性传参

根据后端API接口的要求，在获取用户列表时需要进行传参，在data数据中心创建一个对象，其中包括查询条件、显示第几页、每页显示多少行。

data() return {
    UserList:[],
    queryInfo:{
        query:"",
        pagenum:1,
        pagesize:2
    },


methods:{
    async getUserList(){
        cosnt{data:res}= await this.$http.get('users',{params:this.queryInfo})
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.UserList=res.data.users
        }

3.Table组件的使用

通过elementui.js按需引入Table组件以及栅格系统

            
                
                      
                        
                    
                
                
                    Add User
                
            
            
                
                
                
                
                
                
                
                
                
                
            

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。