npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

element-pages

v1.1.25

Published

vue@2.\*管理后台页面组件封装,依赖于`element-ui`二次封装;包括页面的顶部搜索、表格、分页。主要是用数据驱动的方式配置管理后台的基础页面。(对于自定义度较高的页面,不推荐使用)。

Downloads

272

Readme

element-pages

vue@2.*管理后台页面组件封装,依赖于element-ui二次封装;包括页面的顶部搜索、表格、分页。主要是用数据驱动的方式配置管理后台的基础页面。(对于自定义度较高的页面,不推荐使用)。

vue 项目安装element-pages

npm install element-pages

vue 项目下引入

注意:该组件依赖element-ui;基于[email protected]版本开发 在 main.js 文件下 use;

import elementPages from "element-pages";
Vue.use(elementPages)

组件包更新到 npm

更新之前需要在package.json文件下更新版本号

npm publish

编写文档

*.md 文档编写语法参考


组件说明

  • 组件包括四个组件,pagespage-searchpage-tablepagination
  • 其中pages集合了其他三个组件,包括page-searchpage-tablepagination,每个组件可以单独使用;
  • config 所需参数包含这三个组件内参数;(在同级下,并非包含数据)
  • page-search中;配置searchInit后默认有响应事件会执行查询,notQuery=true关闭。
  • 分页组件pagination事件默认响应config.query()方法,刷新表格数据

prop

  • config 基本配置数据
  • height 页面组件高度

config

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------- | :------: | :------: | :----: | -----------------------------------------------------------: | | column | array | 是 | [] | 列数据;详细column | | data | array | 是 | [] | 渲染的数据 | | query | function | 否 | - | 获取表格数据的方法 | | pagination | object | 是 | {} | 分页数据;详细pagination | | hidePage | boolean | 否 | false | 是否隐藏分页组件 | | loading | boolean | 否 | false | 表格加载状态 | | showSummary | boolean | 否 | false | 是否需要底部汇总计算 | | events | object | 否 | {} | 响应事件;详细events | | search | array | 否 | [] | 搜索框数据;详细search | | searchInit | function | 否 | - | 初始化 搜索的 json 数据 | | searchLabelWidth | string | 否 | - | 搜索栏的 label-width 统一设置 | | rowClassName | boolean | 否 | false | 是否开启行间隔颜色 | | expand | boolean | 否 | false | 是否开启表格展开行插槽,使用方式见插槽expand | | defaultSort | object | 否 | {} | 默认排序方式{prop:'',order:'ascending 正序/descending 倒序'} |

column 列


| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ------------------- | :------------------: | :------: | :----: | ---------------------------------------------: | | label | string | 是 | - | 标题 | | prop | string/array | 是 | - | 展示值的 key,开启 parent 时非必填prop | | width | string | 否 | - | 宽度 | | minWidth | string | 否 | - | 最小宽度,会参与分配剩余宽度 | | fixed | boolean | 否 | false | 固定列 | | mode | string | 否 | - | 模式;可选值 icon、index、tag、function、image | | icon | string | 否 | - | mode=icon 时,展示的 icon 类名 | | type | string/function(row) | 否 | - | mode=tag 时,展示的 tag 风格 | | fn | function(row) | 否 | - | mode=function 时,处理数据后再渲染 | | fit | string | 否 | cover | mode=image 时,图片的展示比例 | | imageWidth | string | 否 | - | mode=image 时,图片的宽度 | | imageHeight | string | 否 | - | mode=image 时,图片的高度 | | index | boolean | 否 | false | 是否显示序号 | | selection | boolean | 否 | false | 是否显示多选框 | | sortable | boolean | 否 | false | 是否开启排序 | | parent | boolean | 否 | false | 是否增加二级数据 | | defaultExpandAll | boolean | 否 | false | 是否默认展开二级数据 | | column | array | 否 | - | 二级的列; parent 开启时必填,参数同 column | | sum | object | 否 | - | 列汇总配置;详细sum | | apearation | array | 否 | - | 按钮数组;详细apearation | | align | string | 否 | center | 表格对齐方式,同 element-table | | rowClass | string | 否 | - | 单元格类名 | | html | boolean | 否 | false | 是否用 v-html 渲染 prop 的值 | | showOverflowTooltip | boolean | 否 | false | 当内容过长被隐藏时显示 tooltip |

mode 展示的模式

  • icon:展示的图标、icon=图标类名,目前仅支持 element-ui 内置 icon
  • index:序号下标,不需要绑定 prop
  • tag:el-tag 标签,type=string|function;tag 风格
  • function:特殊的展示数据时,可用函数处理,fn=(row)=>{}
  • image:展示图片,prop 的值可为 string/Array,可做图片列表;点击图片时,在按钮点击事件返回 type=image

prop

  • prop - array 数组 拼接字符串显示,不会计算底部汇总

pagination 分页组件数据


  • 会进行双向绑定,直接更改父级组件数据
  • 更改页数时,会直接调用 pops.query 方法获取列表数据

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | --------- | :----: | :------: | :----: | ---: | | pageIndex | number | 是 | - | 页码 | | pageSize | number | 是 | - | 页数 | | total | number | 是 | - | 总数 |

apearation 按钮数组


| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | -------- | :--------------: | :------: | :---------: | ---------------------------------------------------------------: | | label | string | 是 | true | 按钮文字 | | type | string | 否 | text | 按钮类型 | | color | string | 否 | primary | 可选'primary','success','warning','danger','info',可直接传颜色值 | | size | string | 否 | small | 尺寸 | | disabled | Boolean/function | 否 | false | 按钮是否禁用 | | show | function | 否 | return true | 按钮是否显示 |

sum 列汇总配置


  • 需开启 showSummary = true

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------- | :-----: | :------: | :----: | --------------------: | | computed | boolean | 否 | false | 是否汇总列,默认不汇总 | | title | string | 否 | - | 不汇总,直接替换文本 | | unit | string | 否 | - | 汇总后的单位 | | toFixed | number | 否 | 0 | 汇总后保留的小数位数 | | isNaNTitle | string | 否 | - | 计算失败展示的文本 |

events 分页组件数据


| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------- | :------: | :------: | :----: | -----------------: | | onChangePageSize | function | 否 | - | 更改页数时回调方法 |

search 搜索模块配置


  • mode 搜索框模式;可选值 :
    • date :日期选择(参数对了的 element-ui 的日期选择器,);
    • input:输入框;
    • select:下拉选项;
    • checkbox:复选框;
    • button:按钮;
  • value :范围日期选择时,对应数组;checkbox:对应 boolean
  • options : {label:'',vlaue:''}
  • 配置 searchInit 后默认有响应事件会执行查询,notQuery=true 关闭

| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ----------------- | :----------: | :------: | :--------------: | -----------------------------------------------------------------: | | mode | string | 是 | - | 搜索框模式 | | labelWidth | string | 否 | - | label 宽度 | | label | string | 否 | - | 搜索 label 文字 | | value | string/array | 是 | - | 搜索的值 | | key | string | 否 | - | 搜索框的 key,返回搜索对象的 key | | notQuery | boolean | 否 | - | 是否关闭组件查询事件 | | placeholder | string | 否 | - | 输入框的占位符,按钮的文字;复选框的文字 | | size | string | 否 | mini | 按钮的尺寸 | | type | string | 否 | - | mode=button 按钮的类型;=date 日期组件的类型(参考日期时间组件 type | | defaultTime | string[] | 否 | - | 默认时间,时分秒,范围选择时,传数组字符串 | | plain | boolean | 否 | false | 按钮是否朴素按钮 | | icon | string | 否 | - | 按钮的图标,参考 element-ui-icon | | options | array | 否 | - | mode=select 时;下拉的选项 | | disabled | boolean | 否 | false | 是否禁用 | | clearable | boolean | 否 | true | 是否可清除 | | loading | boolean | 否 | false | mode=button 时,按钮加载状态 | | valueFormat | string | 否 | 'yyyy-MM-dd' | 日期的显示格式,'yyyy-MM-dd HH:mm:ss' | | rangeSeparator | string | 否 | '-' | 日期范围选择时,间隔符 | | placeholder | string | 否 | '' | 日期范围选择时,占位符 | | startPlaceholder | string | 否 | '开始日期' | 日期范围选择时,开始占位符 | | endPlaceholder | string | 否 | '结束日期' | 日期范围选择时,结束占位符 | | showPickerOptions | boolean | 否 | false | 是否展示快捷选择日期方式 | | pickerOptions | object | 否 | 前三个月快捷方式 | 快捷选择日期方式,参考 element-ui 的 picker-options | | rangeSeparator | string | 否 | '-' | 日期范围选择时,间隔符 |

slot
  • page-search-before 具名插槽

    • 在搜索条件前加入额外的搜索;额外的搜索数据需求单独处理
  • expand 具名插槽

    • 在表格组件开启折叠展开框,使用同官网展开行 type="expand"

@event 事件


  • onSearch(item,data);顶部搜索事件(input 回车时触发,select 选择时,按钮点击时)

    • item:所触发事件的 item 数据
    • 搜索栏的数据对象 {key:value} 的形式返回
  • onChangePageSize(size);分页,改变每页数量事件

  • onChangeCurrentPage(index);分页,改变页码事件

  • rowBtnClick(row,index,btnItem);表格行按钮点击事件

    • row:每行的数据
    • index:按钮的下标
    • btnItem:按钮的 item 数据
  • rowClick(row) 点击某一行时

  • sortClick(column) 点击筛选时

方法

  • doLayout(type);更新表格排版视图,用于表格排版错乱更新。可通过 ref 主动更新
    • type:0-延迟更新,1-nextTick 更新