vue--封装后台管理项目通用组件

Chase620 等级 504 1 1

先看一下我的项目的页面构成

vue--封装后台管理项目通用组件

几乎每个页面都是上下结构,上边是筛选条件区域,下边则是表格和分页

这里我定义了两个组件:myFilter和myTable

myFilter组件

vue--封装后台管理项目通用组件

该组件由五部分构成:input输入框、select下拉框、查询按钮、新增按钮、slot五部分构成,它们都是可选的

input

vue--封装后台管理项目通用组件

(通过v-if标识可选;由inputName指定标题和默认文本;绑定v-model并通过blur和clear事件向父组件反馈用户操作)

vue--封装后台管理项目通用组件

(当执行clear时将input清空;当失去焦点时通过child-btn-event向父组件抛出消息,并将输入框的事件类型指定为input)

select

vue--封装后台管理项目通用组件

(通过selectIsHide标识可选;selectName标识下拉框名称 ;通过v-model绑定value ;selectItems则对应options成员 ; 并通过change事件向父组件反馈用户操作 )

vue--封装后台管理项目通用组件

(它的事件类型为select)

查询和新增按钮

vue--封装后台管理项目通用组件

(它们分别对应的事件类型为search和newAdd)

slot

vue--封装后台管理项目通用组件

(为用户的内容占位)

使用

vue--封装后台管理项目通用组件

vue--封装后台管理项目通用组件

myTable组件

vue--封装后台管理项目通用组件

该组件由两部分构成,分别为表格和分页器,它必须接收如下参数

vue--封装后台管理项目通用组件

table

vue--封装后台管理项目通用组件

框红一的位置,对索引列进行处理

vue--封装后台管理项目通用组件

框红二的位置,对特殊的列进行处理,如展示图片,提供slot由父组件传入

框红三的位置,为父组件保留操作按钮

最后通过cell-click将数据向父组件传递一份

vue--封装后台管理项目通用组件

分页

vue--封装后台管理项目通用组件

vue--封装后台管理项目通用组件

使用

vue--封装后台管理项目通用组件

vue--封装后台管理项目通用组件

本文转自 https://www.jianshu.com/p/f68627950949,如有侵权,请联系删除。

收藏
评论区

相关推荐

Gradle系列之三 Gradle概述以及生命周期
1 Gradle是一种编程框架 gradle主要由以下三部分组成 1 groovy核心语法 2 build script block 3 gradle api 注:本章所有的代码都在 https://github.com/jiulu313/gradledemo.git 如下图 73485499237410.png(https://img
深入理解 Go Slice
(https://imghelloworld.osscnbeijing.aliyuncs.com/0ce8a8773a658d4b843e5796a0dbf001.png) image 原文地址:深入理解 Go Slice(https://github.com/EDDYCJY/blog/blob/master/golang/pkg/20
go-map源码简单分析(map遍历为什么时随机的)
GO 中map的底层是如何实现的 首先Go 语言采用的是哈希查找表,并且使用链表解决哈希冲突。 GO的内存模型 先看这一张map原理图 (https://imghelloworld.osscnbeijing.aliyuncs.com/49dfa7b81e19fbab143ddc0a7b3b7fa0.png) map 再来看
大佬说:“不想加班你就背会这 10 条 JS 技巧”
(https://imghelloworld.osscnbeijing.aliyuncs.com/83909ede68f61936ac3ae10c9ce8b223.png) 为了让自己写的代码更优雅且高效,特意向大佬请教了这 10 条 JS 技巧 1\. 数组分割 const listChunk (list
Android Service 流程分析
启动Service过程 Android Service启动时序图 (https://imghelloworld.osscnbeijing.aliyuncs.com/039313fdaaf1e7dea3bde222b3ec9934.png) Android Service启动时序图.png 上图就是Android
Python的map()方法如何使用?
在学习map()方法之前,我们先在交互模式下看下map()的用法说明。 (https://imghelloworld.osscnbeijing.aliyuncs.com/5c398969745b516276e1f7f5c7dcb764.png) 从上面可以得到的信息是: map()返回的是一个map对象(python2.0中返回的是列表
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
原来Python绘图也可以这么漂亮,这次真的是学习到了!
(https://imghelloworld.osscnbeijing.aliyuncs.com/8830803f033eeed85783e9058cf08968.png) 作者:朱小五 来源:快学Python 👆人生苦短,快学Python! 最近看了一篇文章《一个牛逼的Python 可视化库:PyG2Plot》,可惜只是简单介
Pandas案例精进 | 结构化数据非等值范围查找 ②
(https://imghelloworld.osscnbeijing.aliyuncs.com/4971fbce1ecb759123ecc666f3af2c31.png) 大家好,我是小五🐶 欢迎来到「Pandas案例精进」专栏(https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU5Nzg
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
SQL 诞生 48年了!为什么我们仍在使用它?
(https://imghelloworld.osscnbeijing.aliyuncs.com/a784e838a6d497b87a19798716e69fe8.png) 为什么我们仍在使用 SQL? SQL 和关系数据库管理系统(RDBMS)都是在 上世纪70 年代早期开发的。Edgar F. Codd 开发了 RDBMS,而 Do
被“词云”包围的冰冰会更好看吗?安排
(https://imghelloworld.osscnbeijing.aliyuncs.com/b299933deefc692934e8cc6141ab3894.png) 大家好,我是小五🐶 昨天「凹凸数据」发了一篇张同学投稿的文章《用Python爬取王冰冰vlog弹幕并制作词云(https://mp.weixin.qq.com/
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
[cobra]-强大的CLI应用程序库
关于我 cobra介绍<img src"https://gitee.com/happlyfox/img/raw/master/image20210218091620719.png" alt"title.img" style"zoom:80%;" /Cobra是一个用于创建强大的现代CLI应用程序的库,也是一个用于生成应用程序和命令文件的程序
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti