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

vxe-table-copy

v2.3.12

Published

A fully functional Vue table component.

Downloads

16

Readme

vxe-table

npm version npm build npm downloads gzip size: JS gzip size: CSS
issues issues closed pull requests pull requests closed npm license

A fully functional Vue Table, to meet most of the Table all requirements, and perfect compatibility with any component library.
一个全功能的 Vue 表格,满足绝大部分对 Table 的一切需求,与任意组件库完美兼容

  • Design concept 设计理念

    • 精简的 API(简洁、高效)
    • 模块化表格(功能模块解耦,支持按需加载)
    • 更加灵活的自定义配置项,更高的可扩展性(兼容任意组件库,不污染全局样式及变量)
    • 强大的功能的同时兼具性能(支持横向、纵向虚拟滚动)
  • Plan 计划

    • [x] v1 100% 实现表格的一切实用的功能
    • [x] v2  90% 性能优化,同时兼具功能与性能
    • [ ] v3   0% 实现重构,渲染性能大幅提升,基于 Vue3 并使用 typescript 开发

🐬 如果有更好的建议、优化点或 Bug 都欢迎提 Issues

Browser Support

IE | Edge | Chrome | Firefox | Opera | Safari --- | --- | --- | --- | --- | --- | 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

Features

  • [x] Basic table (基础功能)
  • [x] Dynamic Grid (配置式表格)
  • [x] Size (尺寸)
  • [x] Striped (斑马线条纹)
  • [x] Table with border (带边框)
  • [x] Cell style (单元格样式)
  • [x] Column resizable (列宽拖动)
  • [x] Fluid-height table with fixed header (流体高度)
  • [x] Resize height and width (响应式宽高)
  • [x] Table with fixed header (固定表头)
  • [x] Table with fixed column (固定列)
  • [x] Table with fixed columns and header (固定表头和列)
  • [x] Grouping table head (表头分组)
  • [x] Table sequence (序号)
  • [x] Highlight row and column (高亮行、列)
  • [x] Radio (单选)
  • [x] Checkbox (多选)
  • [x] Sorting (排序)
  • [x] Filter (筛选)
  • [x] Rowspan and colspan (合并行或列)
  • [x] Footer summary (表尾合计)
  • [x] Export CSV (导出 CSV)
  • [x] Show/hide columns (显示/隐藏列)
  • [x] Loading (加载中)
  • [x] Format content (格式化内容)
  • [x] Custom column template (自定义模板)
  • [x] Context menu(快捷菜单)
  • [x] Virtual Scroller(虚拟滚动)
  • [x] Expandable row (展开行)
  • [x] Pager(分页)
  • [x] Toolbar(工具栏)
  • [x] Save the operational state of the column(保存列的操作状态)
  • [x] Tree table (树形表格)
  • [x] Editable CRUD(增删改查)
  • [x] Editable validate(数据校验)
  • [x] DataProxy(数据代理)
  • [x] Keyboard navigation(全键盘操作)

Modules

All modules support loading on demand.(所有的模块都支持按需加载)

  • Tablestyle (核心)
    • Extends (扩展模块)
      • Gridstyle (高级表格)
    • Modules (功能模块)
      • Columnstyle (列)
      • Cellstyle (单元格)
      • Headerstyle (表头)
      • Bodystyle (表内容)
      • Footerstyle (表尾)
      • Iconstyle (图标)
      • Filterstyle (筛选)
      • Loadingstyle (加载中)
      • Tooltipstyle (提示信息)
      • Menustyle (快捷菜单)
      • Exportstyle (导出)
      • Resizestyle (响应式)
      • Pagerstyle (分页 )
      • Toolbarstyle (工具栏)
      • Checkboxstyle (复选框)
      • Radio style(单选框)
      • Inputstyle (输入框)
      • Messagestyle (消息提示框)
      • Buttonstyle (按钮)
    • Plugins(插件)

Docs

To view the example 查看演示
To view the document 查看文档

Installing

require: Vue 2.6+

npm install xe-utils vxe-table

Get on unpkg and cdnjs

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>
import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable, {
  size: 'small'
})

Import on demand

By using the babel-plugin-import , you can load modules on demand and reduce the size of files. First installation, then update .babelrc file
借助插件 babel-plugin-import 可以实现按需加载模块,减少文件体积。然后在文件 .babelrc 中配置

npm install babel-plugin-import -D
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": true
      }
    ]
  ]
}

Now you can import modules like (The minimal packet is ≈ 120KB, gzip ≈ 40KB)
最后这样按需引入模块,就可以减小体积了(最小的包大约是 ≈ 120KB, gzip ≈ 40KB)

import {
  VXETable,
  Table,
  Column,
  Cell,
  Header,
  Body,
  Icon
} from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'

Vue.use(Table)
Vue.use(Column)
Vue.use(Cell)
Vue.use(Header)
Vue.use(Body)
Vue.use(Icon)

// The on-demand mode is not internationalized by default and needs to be imported by itself
// 按需加载的方式默认是不带国际化的,需要自行导入
VXETable.setup({
  i18n: (key, value) => VXETable.t(zhCNLocat, key)
})

Internationalization

npm install vxe-i18n
import Vue from 'vue'
import VueI18n from 'vxe-i18n'
import VXETable from 'vxe-table'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh_CN'
import enLocat from 'vxe-table/lib/locale/lang/en'

const messages = {
  zh_CN: {
    ...zhCNLocat
  },
  en: {
    ...enLocat
  }
}

const i18n = new VueI18n({
  locale: 'zh_CN',
  messages,
})

Vue.use(VXETable, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

Example

<template>
  <div>
    <vxe-table ref="xTable" :data.sync="tableData">
      <vxe-table-column type="index" title="Number" width="80"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="sex" title="Sex"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: 'test1',
          role: 'developer',
          sex: 'Man',
          address: 'address abc123'
        }
      ]
    }
  }
}
</script>

Donation

If the project is very helpful to you, you can buy the author a cup of coffee.
如果这个项目对您有帮助,请作者喝杯咖啡吧。☕

pay

License

Copyright (c) 2019-present, Xu Liangzhan