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

ys-vue

v0.1.65

Published

#### variables

Downloads

23

Readme

TABLE文档

variables

组件配置属性,详情见下面Option属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | data | 显示数据 | Array | - | - | | option | 组件配置属性,详情见下面Option属性 | Object | - | - |

Option Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | column | 显示列表组,详情见下面Column属性 | Array | - | - | | propEmptyDefault | 列表没有值时,默认显示的值 | String | - | - | | isLoading | 是否正在加载中 | Boolean | true/false | false | | isMenu | 是否显示操作列 | Boolean | true/false | true | | isPagination | 是否显示分页 | Boolean | true/false | false | | paginationCurrent | 当前页码 | Number | - | - | | paginationSize | 每一页加载多少条数据 | Number | - | - | | paginationTotal | 总页数 | Number | - | - | | paginationPageSizes | 分页信息 | Array | - | [10, 20, 30, 40] | | menuLabel | 操作列的标题 | String | - | 操作 | | menuWidth | 操作列的宽度 | String | - | 操作 | | menuAlign | 操作列的对齐方式 | String | left/center/right | right | | menuFixed | 操作列是否固定在左侧或者右侧,true 表示固定在左侧 | String/Boolean | left/true/right | - | | isMenuEdit | 是否显示编辑按钮 | Boolean | true/false | true | | menuEditTitle | 显示编辑按钮的文本 | String | - | 编辑 | | isMenuDelete | 是否显示删除按钮 | Boolean | true/false | true | | menuDeleteTitle | 显示删除按钮的文本 | String | - | 删除 | | menuEditOption | 编辑按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes | Object | - | - | | menuDeleteOption | 删除按钮类型时的按钮属性,详情查看一下的menuEditOption/menuDeleteOption Attributes | Object | - | - | | emptyText | 数据为空时文案,也可以设置slot->empty | String | - | 暂无数据 | | isIndex | 是否显示序列号 | Boolean | true/false | false | | indexLabel | 序列号头部标题 | String | - | # | | indexMethod | 序列号自定义索引,例如:indexMethod(index) {return index * 2;} | number, Function(index) | - | - | | indexWidth | 序列号列的宽度 | String | - | 50 | | indexFixed | 序列号列的宽度 | String/Boolean | left/true/right | - | | indexAlign | 序列号列的宽度 | String | left/center/right | - | | isExpand | 是否可展开模式 | Boolean | true/false | false | | expandLabel | 展开模式头部标题 | String | - | - | | expandWidth | 展开模式列的宽度 | String | - | 50 | | expandFixed | 展开模式列是否固定在左侧或者右侧,true 表示固定在左侧 | String/Boolean | left/true/right | - | | expandAlign | 展开模式的对齐方式 | String | left/center/right | - | | slotExpand | 展开模式的插槽,返回的数据:data当前列数据,index列索引 | - | - | - | | isSelection | 是否可多选模式 | Boolean | true/false | false | | selectionLabel | 多选模式头部标题 | String | - | - | | selectionWidth | 多选模式列的宽度 | String | - | 50 | | selectionFixed | 多选模式列是否固定在左侧或者右侧,true 表示固定在左侧 | String/Boolean | left/true/right | - | | selectionAlign | 多选模式的对齐方式 | String | left/center/right | - | | height | Table 的高度,默认为自动高度。 | String/Number | - | - | | maxHeight | Table 的最大高度,例如:50、150px | String/Number | - | - | | border | 是否带有纵向边框 | Boolean | true/false | false | | style | Table 的尺寸 | String | medium / small / mini | - | | showHeader | 是否显示表头 | Boolean | true/false | false | | highlightCurrentRow | 是否要高亮当前行 | Boolean | true/false | false | | currentRowKey | 当前行的 key | String,Number | - | - |

Column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | slotHeader | 当前列插槽头部自定义插槽 | String | - | - | | slotName | 当前列插槽,返回的数据:data当前列数据,index列索引 | String | - | - | | label | 标题 | String | - | - | | colType | 对应列的类型,同element-ui type | String | selection/index/expand | - | | indexMethod | 只有在colType =index有效,序列号自定义索引,例如:indexMethod(index) {return index * 2;} | number, Function(index) | - | - | | columnKey | column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 | String | - | - | | width | 列的宽度 | String | - | - | | minWidth | 列的最小宽度 | String | - | - | | fixed | 操作列是否固定在左侧或者右侧,true 表示固定在左侧 | String/Boolean | left/true/right | - | | renderHeader | 列标题 Label 区域渲染使用的 Function | Function | - | - | | sortable | 对应列是否可以排序 | Boolean | true/false | false | | sortMethod | 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致 | Function | - | - | | sortBy | 指定数据按照哪个属性进行排序 | String/Array/Function(row, index) | - | - | | sortOrders | 数据在排序时所使用排序策略的轮转顺序,参考element-ui sort-orders | - | - | - | | resizable | 对应列是否可以通过拖动改变宽度,参考element-ui resizable | - | - | - | | formatter | 用来格式化内容 | - | - | - | | showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | true/false | false | | align | 列的对齐方式 | String | left/center/right | - | | className | class 名称 | String | - | - |

Events

| 事件名 | 说明 | | ---- | ---- | | handleEdit | 点击编辑按钮,返回值,scope | | handleDelete | 点击删除按钮,返回值,scope | | paginationChance | 在isPagination=true时,页码改变回调事件 | | selectionChange | 当选择项发生变化时会触发该事件 | | $emit | 当用户手动勾选数据行的 Checkbox 时触发的事件 | | selectAll | 当用户手动勾选全选 Checkbox 时触发的事件 | | sortChange | 当表格的排序条件发生变化的时候会触发该事件 | | rowClick | 当某一行被点击时会触发该事件 | | rowDblclick | 当某个单元格被双击击时会触发该事件 | | cellMouseEnter | 当单元格 hover 进入时会触发该事件 | | cellMouseLeave | 当单元格 hover 退出时会触发该事件 | | cellClick | 当某个单元格被点击时会触发该事件 | | cellDblclick | 当某个单元格被双击击时会触发该事件 | | currentRowChange | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 | | expandChange | 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded)| | rowContextmenu | 当某一行被鼠标右键点击时会触发该事件 | | headerClick | 当某一列的表头被点击时会触发该事件 | | headerDragend | 当拖动表头改变了列的宽度的时候会触发该事件 |

Methods

| 方法名 | 说明 | 说明 | | ---- | ---- | ---- | | clearSelection | 用于多选表格,清空用户的选择 | - | | toggleAllSelection | 用于多选表格,切换所有行的选中状态 | - | | clearSort | 用于清空排序条件,数据会恢复成未排序的状态 | - | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 | - | | toggleRowSelection | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected | | toggleRowExpansion | 用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) | row, selected | | setCurrentRow | 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 | row | | clearFilter | 不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey | | sort | 不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由columnKey组成的数组以清除指定列的过滤条件 | prop: string, order: string |

Slot 插槽

| 事件名 | 说明 | | ---- | ---- | | menu | 右边操作栏插槽 | | menuHeader | 右边操作栏头部自定义 | | slotPagination | 分页左边的插槽,只有在isPagination = true时有效 |

编辑列按钮类型时的按钮属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | size | 按钮尺寸String | medium / small / mini | mini | | type | 按钮类型,删除按钮默认为danger | String | primary / success / warning / danger / info / text | - | | plain | 是否朴素按钮 | Boolean | true/false | false | | round | 是否圆角按钮 | Boolean | true/false | false | | circle | 是否圆形按钮 | Boolean | true/false | false | | loading | 是否加载中状态 | Boolean | true/false | false | | icon | 图标类名 | String | - | - | | style | 按钮style | String | - | - |