因为需要在所有的界面中有面包屑和卡片,所以在全局样式globe.css中加入:
css">.el-breadcrumb{
margin-bottom: 10px;
}
components/user/Users.vue写入:
```css
<template>
<div>
<!--面包屑导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区域-->
<el-card class="box-card">
<!--搜索与添加区域-->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" >
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
export default {
name: 'Users'
}
</script>
<style lang="less" scoped>
</style>
给card的边框添加阴影:
css">/*权重不足需要加!important*/
.el-card{
box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
得到的页面:
加入el-table显示数据
数据接口:
</el-row>下加入:
<!--用户列表区域-->
<el-table :data="userList" stripe border>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态" prop="mg_state"></el-table-column>
<el-table-column label="操作" ></el-table-column>
</el-table>
<script></script>部分替换为:
<script>
export default {
data() {
return {
//获取用户列表的参数对象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 2
},
userList:[]
,
total:0
}
},
created() {
this.getUserList()
},
methods: {
//初始化这个组件会调用getUserList,从而发起一次axios请求,返回一个promise对象,为了简化promise操作
//我们可以使用async和await来优化这次异步请求,紧接着我们会得到一个数据对象,从这个数据对象里我们可以解构赋值出一个data属性
//将其重命名为res
async getUserList() {
const { data: res } = await this.$http.get('users', { params: this.queryInfo });
console.log(res)
if(res.meta.status!==200) return this.$message.error('获取用户列表失败');
this.userList = res.data.users
this.total = res.data.total
console.log(this.userList)
}
}
}
</script>
此时我们可以发现,表格离输入框太近,字也较大
在globe.css加入:
.el-table{
margin-top: 15px;
font-size: 12px;
}
结果: