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

schema-table

v0.0.4

Published

```js import { SchemaTable, DataModel } from 'schema-table' ```

Downloads

6

Readme

使用方法

import { SchemaTable, DataModel } from 'schema-table'

属性 Props

| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | schema | Object | 是 | | 字段描述文件,由 schema-form-editor 生成,包含各个字段的信息 | | model | Object | 是 | | 数据模型,包含 CURD 接口信息 | | model.query | Object | 是 | | 传入初始的 query 信息,通常是分页信息 { pageSize: 10, pageNumber: 1 },pageSize 可以取 10/20/50,query 信息会在列表请求的时候带给后端 | | hasQuery | Boolean | | true | 是否包含搜索、筛选框、搜索按钮等 | | search | String | | '' | 传入空字符串时,不包含搜索框;传入非空字符串时,显示搜索框,同时传入的字符串作为搜索框的占位符 | | filters | Array | | [] | 字符串数组,可以包含要筛选的字段 key 值(schema 中的 name),或者字符串 '$timerange'(时间范围筛选专用) | | hasAction | Boolean | | true | 是否在表格的最右增加一个“操作”列;hasAction 为 true 时,下面的 canCreate/canEdit/canDelete 才会生效 | | canCreate | Boolean | | true | 是否显示新增按钮 | | canEdit | Boolean | | true | 是否显示编辑按钮 | | canDelete | Boolean | | true | 是否显示删除按钮 | | fetchOnEdit | Boolean | | true | 展示编辑弹框时,是否会调用一次详情接口进行回填(某些场景下,列表接口只返回部分部分字段,只有详情接口会返回全部字段);若为 false,则会使用表格列表接口返回的 row 数据进行回填 | | defaultFormData | Object | | {} | 给新增、编辑对话框中的表单增加默认值 | | hasPagination | Boolean | | true | 是否显示分页 | | maxHeight | String | | undefined | 表格行显示区域的最大高度,格式为 '500px' 这样的字符串 | | dialogWidth | String | | '600px' | 新增、编辑对话框的宽度,也可以传百分比 | | colWidths | Object | | {} | 指定各列的宽度,key 为字段的 name。可以指定名为 “$actionBtns”的字段来指定“操作”列的宽度 |

插槽 Slots

| 插槽名称 | 绑定值 | 作用 | | --- | --- | --- | | createBtn | onCreate(方法) | 复写新增按钮(如增加“批量添加”功能)调用绑定的 onCreate 方法可以唤起默认的新增对话框 | | 列插槽(每一列的插槽名称都不同,具体为 schema 中的 name 值) | row(Object)/ data(Object) | 针对某一列的模板进行复写,绑定的 row 为当前行的数据,data 为当前格子(当前行当前列)的数据 | | overrideActionBtns | row(Object) | 在 hasAction 为 true 时生效。用于复写整个“操作”列 | | actionBtns | row(Object) | 用于插入自定义操作,插入位置位于默认的“编辑”和“删除”按钮之间 |

自定义“操作”栏按钮写法参考

<!-- 用 el-link制作按钮,添加 action-link 的 class 增加间距 -->
<el-link
  class="action-link"
  type="danger"
  @click="onDelete(row)"
>
  <!-- 一个 el-icon 作为图标 -->
  <i class="el-icon-download"/>
  下发
</el-link>