P15-Vue3后台管理系统-用户管理界面-table表格封装
P15-Vue3后台管理系统-用户管理界面-table表格封装
1.概述
这篇文章继续介绍用户管理界面，在这篇文章中完成table表格封装
2.新建表格组件
2.1.新建CommonTable组件
2.2.注册子组件
在UserManage组件中注册CommonTable子组件
3.封装table表格
3.1.查看官网table组件
我们选择Element官网提供的自定义列的模板，这样我们就可以根据需求创建table表格
3.2.复制table模板
3.3.引用到CommonTable组件
<template><div class="common-table"><el-table><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column></el-table></div>
</template><script>
export default {}
</script><style lang="scss" scoped></style>3.4.定义表格数据结构
封装CommonTable组件表格的列名和数据是由调用该组件的父组件传入，因此在UserManage组件中创建表格列名和数据。
3.5.UserManage组件请求接口数据
UserManage组件向接口发送请求，获取table表格data数据传给子组件CommonTable进行展示
3.6.CommonTable组件展示table数据
3.7.调整表格样式
- 去掉UserManage组件的div标签
- CommonTable组件设置表格高度
- CommonTable组件设置表格样式
3.8.设置表格序号
3.9.设置分页
- 复制Element提供的分页组件
- 应用分页到CommonTable组件中
3.10 设置分页样式
- Main.vue组件设置主体内边距
- CommonTable组件设置分页样式
3.11.添加表格操作列
在Element官网找到Table表格对应的自定义列模板，复制模板中操作列的内容。
3.12.应用到CommonTable组件
3.13.表格效果
4.表格完整代码
4.1.UserManage组件完整代码
<template><div class="manage"><div class="manage-header"><el-button type="primary">+ 新建</el-button><common-form inline :formLabel="formLabel" :form="searchForm"><el-button type="primary">搜索</el-button></common-form></div><common-table :tableData="tableData" :tableLabel="tableLabel" :config="config"></common-table></div>
</template><script>
// 导入子组件
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {components: {// 注册子组件CommonForm,CommonTable},data() {return {// table表格数据tableData: [],// 表格列名tableLabel: [{// prop属性来对应对象中的键名即可填入数据prop: 'name',// 表格列名称label: '姓名'},{prop: 'age',label: '年龄'},{prop: 'sexLabel',label: '性别'},{prop: 'birth',label: '出生日期',width: 200},{prop: 'addr',label: '地址',width: 320}],// 表格配置信息config: {page: 1,total: 30,loading: false},// form表单数据searchForm: {keyword: ''},formLabel: [{model: 'keyword',label: ''}]}},methods: {// 请求table表格数据getList() {this.config.loading = truethis.$http.get('/api/user/getUser', {params: {page: this.config.page}}).then(res => {// 请求接口返回的数据赋值给tableDatathis.tableData = res.data.list.map(item => {item.sexLabel = item.sex === 0 ? '女' : '男'return item})this.config.total = res.data.countthis.config.loading = false})}},// 调用请求表格数据方法mounted() {this.getList()}
}
</script><style lang="scss" scoped>
@import '@/assets/scss/userManage';
</style>4.2.CommonTable组件完整代码
<template><div class="common-table"><!-- 将表格数据tableData赋值给data -stripe：斑马纹显示表格--><el-table :data="tableData" height="90%" stripe><!-- 表格第一列序号 --><el-table-column label="序号" width="85"><template slot-scope="scope"><!-- 设置序号- (config.page - 1) * 20 ：获取当前页数，每页20条- scope.$index + 1：设置序号--><span style="margin-left: 10px">{{ (config.page - 1) * 20 + scope.$index + 1 }}</span></template></el-table-column><!-- 表格序号后面的列通过遍历父组件传入的data数据动态改变-show-overflow-tooltip:超出一行的内容点点点显示--><el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" show-overflow-tooltip><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row[item.prop] }}</span></template></el-table-column><!-- Table表格操作列 --><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 设置分页- :total="config.total":设置总页数- :current-page.sync="config.page"：设置当前页数--><el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page"> </el-pagination></div>
</template><script>
export default {// 接收父组件传来的数据props: {tableData: Array,tableLabel: Array,config: Object},methods: {// 表格操作列方法handleEdit() {},handleDelete() {}}
}
</script><style lang="scss" scoped>
.common-table {// 设置表格高度，减去页面header高度height: calc(100% - 62px);// 设置表格背景色background-color: #fff;// 设置相对定位position: relative;// 设置分页样式.pager {position: absolute;bottom: 0;right: 20px;}
}
</style>P15-Vue3后台管理系统-用户管理界面-table表格封装相关推荐
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理 作品名 ...
- vue3后台管理系统
vue3后台管理系统 vite构建vue3项目 项目中其他需求的引入 1. element-plus引入 2. vue3引入路由 3. element-plus图标的引入和使用 静态引入图标 动态引入 ...
- P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态
P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态 文章目录 P22-Vue3后台管理系统-权限管理之路由守卫判断⽤户登录状态 1.概述 2.mock接口返回token 2.1.mock ...
- Java-Web机试练习题一、后台管理系统——管理员管理模块
题目:后台管理系统--管理员管理模块 一. 语言和环境 1. 实现语言:JAVA 语言. 2. 环境要求:MyEclipse/Eclipse + Tomcat + MySql. 3. 使用技术:Jsp ...
- vue3后台管理系统（https://github.com/noob-Jp/my-admin-vue3）
# my-admin-vue3 线上预览地址:vue3后台管理系统 本项目是我第一次写vue3,vue2已经学了很长时间,早就想开始接触vue3,通过b站和github上项目的介绍我了解到好多成熟的v ...
- 通用后台管理系统，管理后台框架模板演示地址
一.这个通用的后台管理系统,管理后台框架模板,主要包括如下功能: 1.功能模块 主要包括新闻管理.留言管理.广告管理.友情链接管理.图片管理.用户管理等. 具体包括搜索.列表展示.分页.图片上传.批量 ...
- VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景 后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路 权限管理无非前端或者后台解决 先说一下前端解决的思路:在设 ...
最新文章
- java 矩阵题目_java练习本(20190604)
- 22行代码AC_Prime Number Aizu - 0009（素数筛）(解题报告)
- 数据挖掘与数据化运营实战. 3.10 信用风险模型
- Docker：使用本地卷和tmpfs挂载
- android评论嵌套,android 嵌套的listview示例（可参照实现朋友圈评论）
- leetcode —— 2. 两数相加 （对于链表更新的细节）
- mysql 缓冲区_mysql 线程级别的缓冲区
- 5绘制收银台程序_透视Matplotlib核心功能和工具包 - 高级特征绘制
- 使用python对学生表的查询_python + mysql 实现查询表数据
- 算法：62唯一路径Unique Paths 动态规划和排列组合算法
- nexus3作为docker私服的使用
- python图像处理之一 - Pillow的基本用法
- 完美解决网页中Flash狂闪的问题
- 19年恶意软件排行榜
- 沙尘暴天气空气净化器市场走俏
- L1-033 出生年-PAT 团体程序设计天梯赛 GPLT
- spark读写clickhouse
- TopCoder SRM 558 Div 1 - Problem 1000 SurroundingGame
- 迪士尼和李宁合作推出“李宁复古运动米奇系列”服饰
- Linux—系统关机命令详解