用户列表开发
![](https://i-blog.csdnimg.cn/blog_migrate/4016b82571a7ae1de0394f7bde040bed.png)
点击用户列表, 在主体区域展示数据
面包屑 + 卡片视图
1 点击用户列表,在主体区显示用户组件
1.1 创建用户组件
![](https://i-blog.csdnimg.cn/blog_migrate/c5b3d11095fe67c13a9d9ffb75f71b19.png)
1.2 添加路由跳转
注意路径是自动生成的, 不能随意定义了
![](https://i-blog.csdnimg.cn/blog_migrate/86f7fc0bcdc0441e81ed982de8496a5c.png)
测试:
![](https://i-blog.csdnimg.cn/blog_migrate/59eef39856fad2ef00590bbe0c021b5c.png)
2 解决一个小问题
二级菜单并没有被高亮显示
需求: 点击二级菜单,高亮显示。同时刷新列表之后,也还是高亮显示
![](https://i-blog.csdnimg.cn/blog_migrate/8994e4b195bb616592654047db4962ec.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8b8a5b6f83b86f14ae73d3a378be0730.png)
死数据的高亮实现
![](https://i-blog.csdnimg.cn/blog_migrate/fa2d51eb644dbe23a360f9b2eff5695a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3b4dfaad66d88f9e95234fdc1be042db.png)
当点击 的时候。 把路径放在sessionstorage当中,
当你刷新的时候,即 home组件刚被创建的时候,就立即取出来,赋值到左侧菜单就可以了
![](https://i-blog.csdnimg.cn/blog_migrate/16d069f99f36d22b4c9368ee8636b49e.png)
:default-active="activePath"
@click="saveActivePath('/' + sunItem.path)"
![](https://i-blog.csdnimg.cn/blog_migrate/3baf11c673ca9138e5a0797ee40bc449.png)
this.activePath = window.sessionStorage.getItem('activePath')
saveActivePath(activePath) {
window.sessionStorage.setItem('activePath', activePath)
this.activePath = activePath
// console.log(this.$route.path)
}
测试:此时可以高亮显示了
3 绘制用户列表的基本机构
![](https://i-blog.csdnimg.cn/blog_migrate/9ac7ad89ef2c526f91ea55aa28bd517c.png)
3.1 面包屑
![](https://i-blog.csdnimg.cn/blog_migrate/1ea1bbfcffdc7191db8128f8daa4e22d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dc85f8ebcd37e57d1173604977b28075.png)
<!-- 面包屑 -->
<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>
![](https://i-blog.csdnimg.cn/blog_migrate/e8e0502d7eaeb95e37abe36ae28bba74.png)
3.2卡片
![](https://i-blog.csdnimg.cn/blog_migrate/05f67c416251a1002e85c25f29eafb20.png)
1 添加卡片
![](https://i-blog.csdnimg.cn/blog_migrate/bd8f7f7a157b32c2444a04019f51ba50.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6d2759dfc0871191392ea2d4c4491325.png)
2 给面包屑添加 边距
![](https://i-blog.csdnimg.cn/blog_migrate/814cfa2b14ea9cb11c8da83e1d35a3ba.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9df997578a16345c139555caa9491979.png)
3 给卡片重置阴影部分
![](https://i-blog.csdnimg.cn/blog_migrate/c0fdfb586146311b87a4c5b996e10746.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a28ccd1500d4e4145bce605eb59ef48.png)
3.3 添加 复合型输入框
![](https://i-blog.csdnimg.cn/blog_migrate/f871c00c1538180ec428762fe94ee832.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c5d0beb8b3cf78b38773ba4f84b48510.png)
input当中包含一个el-button
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
![](https://i-blog.csdnimg.cn/blog_migrate/7f3bdc63d6092815156a39f755161791.png)
设置一个固定宽度。 怎么设置固定宽度那?
使用elementui里边的栅格
【横向】布局用栅格
2 栅格进行布局
![](https://i-blog.csdnimg.cn/blog_migrate/e96a374a5e3228d1b8ce06c0f505248c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ca5871dedfad3564338e6a6b01d49cae.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b6e24fa51f3570eba8c36026dfbff309.png)
给每个格添加边距 用:gutter
![](https://i-blog.csdnimg.cn/blog_migrate/3edf0e089bc20268a1046a769c0b60b4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b0336795b6dcce7d7ad80c52f4e50bf.png)
或者:
4 获取用户列表数据
![](https://i-blog.csdnimg.cn/blog_migrate/38cb878e656e14a593ea670f640f4030.png)
推荐 把调用参数先定义到data里边
返回结果,需要渲染的数据,也定义到data里边
![](https://i-blog.csdnimg.cn/blog_migrate/8e42d50617abaf98890cb5aa276ece49.png)
当前页 是1
5 渲染用户列表数据
![](https://i-blog.csdnimg.cn/blog_migrate/569e89cb0f8d74f4ec0cef50b896d71c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a11d8fa678d03414ce855095aeac719b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ab07a2cbf9dde3173d55474d299a0163.png)
:data 是data里边的数据。 数组中的对象要渲染成一行
对象中的每一个属性,代表一列
5.1 添加格式:
![](https://i-blog.csdnimg.cn/blog_migrate/677c2080831c1317a31af7c107e89131.png)
![](https://i-blog.csdnimg.cn/blog_migrate/040a7412bd9db7ec68c034c828ee42f9.png)
5.2 给每一个添加边框线
![](https://i-blog.csdnimg.cn/blog_migrate/01575708a8aa9f3e4478aa7907536e03.png)
![](https://i-blog.csdnimg.cn/blog_migrate/54edde914f7f89fc8bf5d1ea257aa502.png)
5.3 隔行变色
![](https://i-blog.csdnimg.cn/blog_migrate/de05e51c60f9f3e3ebdc9b2a1d235b22.png)
![](https://i-blog.csdnimg.cn/blog_migrate/937dd4ff5046cc686ef15581dadcc590.png)
![](https://i-blog.csdnimg.cn/blog_migrate/11f2ae894a233851910d39fc2cd6f720.png)
5.4 添加间距
![](https://i-blog.csdnimg.cn/blog_migrate/a75e92436dabd973eaa274a68199dd46.png)
![](https://i-blog.csdnimg.cn/blog_migrate/10082d67e0e204b0c268a41bcb257853.png)
问题:
我写的table 并没有边距
因为,table不在card里边!!!!!
![](https://i-blog.csdnimg.cn/blog_migrate/22a929b0df9e28c3f18351acf8908769.png)
5.5 用户列表添加索引列
![](https://i-blog.csdnimg.cn/blog_migrate/c06a2ebf72690050cde505bd07781480.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6931efa6a7b77b767af0b4f2972aea11.png)
5.6 给单元格设置宽度
<el-table-column
prop="date"
label="日期"
width="180">
给table设置大小
<el-table
:data="tableData"
style="width: 100%">
6改造状态列的显示效果
![](https://i-blog.csdnimg.cn/blog_migrate/cc21f98bdd49628770d2926a097ce0fb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5bacf1cdd3a6325e7d03710145a01fc2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b6b1f85498ae17e2e4696e0c947b29c.png)
通过作用域插槽去接收scope,就可以通过scope 来row这个属性
scope.row 就代表这一行的数据
数据拿到了,就可以拿到这个状态属性值
2
![](https://i-blog.csdnimg.cn/blog_migrate/13e0475c4f585511a36aaa51e7630068.png)
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>
v-model来控制关闭和打开
![](https://i-blog.csdnimg.cn/blog_migrate/863d045493293ce55ff21b1008f18519.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ad8b01ae28660d4865f3a7845ec5ad4c.png)
<el-table-column label="状态">
<template v-slot="{ row }">
<el-switch v-model="row.mg_state" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
![](https://i-blog.csdnimg.cn/blog_migrate/4b8e67d55ba42399ada591ee88c0299c.png)
如果后台返回的0,1 用 active-value="1" 展开的值 inactive-value="0 ,不展开的值
也可以指定颜色:active-color="#13ce66" inactive-color="#ff4949"
6.1 实现用户状态的修改
![](https://i-blog.csdnimg.cn/blog_migrate/7db866563f1313fc9682b49decd26611.png)
我们修改状态, 然后进行刷新, 发现状态又变回去了
为什么状态没有保存下来那?我们只是在前台 ,并没有同步到数据库。所以你在刷新页面,又变回去了
解决:
监听到Switch 开关状态的改变,从而拿到最新的状态
调用api接口,保存 到数据库中
监听事件
![](https://i-blog.csdnimg.cn/blog_migrate/4e507922b488a293f8d80d1fe39a41aa.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40ac83e624d968a5c473017d3c848207.png)
![](https://i-blog.csdnimg.cn/blog_migrate/426d2bede85844707b216a2cac96ff82.png)
只要你修改, v-model就会拿到最新的数据
![](https://i-blog.csdnimg.cn/blog_migrate/d628e43f213beeb4be8a570638ddbdfd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/01aa76fe9dd861378279839b7eec7847.png)
7插槽形式自定义列的渲染
![](https://i-blog.csdnimg.cn/blog_migrate/80cee4820f9cf38cae8811668334587b.png)
操作这一列,必须要拿到id才能操作 ,所以只能根据作用域插槽来操作
![](https://i-blog.csdnimg.cn/blog_migrate/edfa9e4041ae1691cf416016cbf09f31.png)
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
![](https://i-blog.csdnimg.cn/blog_migrate/e7aad2ab1b3357390b3034817cc9b6e8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1984e88cc75e81a7931032e3b071857e.png)
7.2 文字提示
第三个按钮看不出是什么功能,所以添加一个提示按钮
![](https://i-blog.csdnimg.cn/blog_migrate/27252117b996baa573c206de9a2b0a3f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ccdb0de0eeae0621b66e8c2076db10d8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eac36360308c72276dd0d68ceecad983.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ccf71711ff4b25a769b3ad3a3b41dbd8.png)
3 怎么自动隐藏?
![](https://i-blog.csdnimg.cn/blog_migrate/f55d3662e0bbc4dbef65bff149092785.png)
![](https://i-blog.csdnimg.cn/blog_migrate/66a4ada7c933226434c7da00f3008f4e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/81ceadae9db6a7fae88930176884a250.png)
<el-table-column label="操作">
<template>
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<!-- 分配角色按钮 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
8实现数据分页效果
![](https://i-blog.csdnimg.cn/blog_migrate/79b76254ac2b4c753ee37317c8a94ace.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fb485f81480acab499b03f60e670327f.png)
8.1 @size-change="handleSizeChange"
监听 pagesize改变的事件
![](https://i-blog.csdnimg.cn/blog_migrate/e1041944c9e896b4130f72bddc9b33c1.png)
8.2 @current-change="handleCurrentChange"
只要页面值发生了变化,就会立即触发 @current-change 事件处理函数
![](https://i-blog.csdnimg.cn/blog_migrate/7b7804d2ebe3ee17d209a2912b20b6dc.png)
8.3:page-sizes="[100, 200, 300, 400]"
提供我们进行切换, 提供了几项,下拉菜单就能看到几项
第一个数据要和pageszie一样
![](https://i-blog.csdnimg.cn/blog_migrate/be292cbc98016aa0b0b0e3a10582a308.png)
8.4 layout="total, sizes, prev, pager, next, jumper"
用于展示那些功能组件
8.5 如果分页条数没出来,看total是否被赋值上
8.5 代码
![](https://i-blog.csdnimg.cn/blog_migrate/8d5f357979d3bf64433bb33ca95284b5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2f8ec0ae279fa79b4747531131fb1e04.png)
<!-- 分页 -->
<el-pagination
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
@size-change="handleSizeChange"
:page-size="queryInfo.pagesize"
:page-sizes="[5, 9, 13, 15]"
layout="total, sizes, prev, pager, next, jumper"
:total="userData.total"
>
// 监听 pagesize 改变事件 每页显示的个数
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值 改变的事件 当前页面值
handleCurrentChange(newPage) {
console.log(newPage)
this.queryInfo.pagenum = newPage
this.getUserList()
},
:page-size="queryInfo.pagesize"
:page-sizes="[5, 9, 13, 15]"
queryInfo,pagesize: 5 要和 :page-sizes="[5, 9, 13, 15]" 保持一致
分页的bug:
![](https://i-blog.csdnimg.cn/blog_migrate/cb1e808ce273ccc06535a8a11a8ae48c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/395dcdf904671db994a3d154944871a6.png)
8.6添加边距
![](https://i-blog.csdnimg.cn/blog_migrate/cc320a6a2ff07167dff16838744d8033.png)
设置位置:
![](https://i-blog.csdnimg.cn/blog_migrate/b8f524758c7d35bdd251642dee390ff9.png)
.el-pagination{
margin-top: 25px;
display: flex;
justify-content: end;
}
或者使用el-row 来设置位置
9实现搜索的功能
9.1 搜索功能
![](https://i-blog.csdnimg.cn/blog_migrate/b8d03eddd6b43c0ba2165cb161fe8ad0.png)
首先 文本框 和data的数据进行双向绑定
绑定完毕,点击搜索按钮,去调用接口
1双向绑定
![](https://i-blog.csdnimg.cn/blog_migrate/96b93c83f9c26533e6bb3a6f8ced8e78.png)
2 调用接口
![](https://i-blog.csdnimg.cn/blog_migrate/1e2127e73302f3c6f88225c0747e358e.png)
9.2 删除input ,获取所有数据
需求: 点击清空按钮, 文本框就被重置了,所有用户就会立即被查询出来
![](https://i-blog.csdnimg.cn/blog_migrate/9c682b7eddbb90f8137ee25f7ba5cc61.png)
![](https://i-blog.csdnimg.cn/blog_migrate/51a51de7dc2878f31f41a72ce79f8423.png)
当你点击清空按钮,就会立即触发清空事件
![](https://i-blog.csdnimg.cn/blog_migrate/2400ea5e8aa776dd9ef8cbc696d8e689.png)
![](https://i-blog.csdnimg.cn/blog_migrate/00c3d0e978137085066f71370e178c64.png)