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

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

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

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

myFilter组件

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

input

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

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

select

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

(它的事件类型为select)

查询和新增按钮

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

slot

(为用户的内容占位)

使用

myTable组件

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

table

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

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

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

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

分页

使用

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

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

KVM调整cpu和内存

一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid