Installations

npm install wp-diy-table

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.15.3

NPM Version

6.4.1 Score

71.4

Supply Chain

90.3

Quality

76.7

Maintenance

100

Vulnerability

99.6

License

Releases

Unable to fetch releases

Contributors

1

Download Statistics

Total Downloads

138

Last Day

2

Last Week

4

Last Month

11

Last Year

138

Maintainers

1

Package Meta Information

Latest Version

1.1.0

Package Id

wp-diy-table@1.1.0

Unpacked Size

6.08 MB

Size

1.16 MB

File Count

380

NPM Version

6.4.1

Node Version

10.15.3

Publised On

23 Aug 2024

Total Downloads

Cumulative downloads

Total Downloads

138

Last day

0%

2

Compared to previous day

Last week

33.3%

4

Compared to previous week

Last month

175%

11

Compared to previous month

Last year

0%

138

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

Versions

vxe-table

简体中文 | 繁體中文 | English | 日本語

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟树、列拖拽、懒加载、快捷菜单、数据校验、导入/导出/打印、表单渲染、自定义模板、渲染器、JSON 配置式...

设计理念
- 面向现代浏览器，高效的简洁 API 设计
- 模块化表格、按需加载
- 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
计划
- ~~v1.0 基于 vue2.6，支持所有主流的浏览器，实现表格的一切实用的功能~~
- ~~v2.0 基于 vue2.6，支持所有主流的浏览器，同时兼具功能与性能~~
- v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11
- v3.9 基于 vue2.6+，重构拆分组件，分为 Vxe table 和 Vxe UI，将支持可视化组件
- v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
- v4.7 基于 vue3.2+，重构拆分组件，分为 Vxe table 和 Vxe UI，将支持可视化组件
- 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化

浏览器支持


80+ ✔	80+ ✔	90+ ✔	75+ ✔	10+ ✔

功能点

安装

版本：vue 3.x

1npm install vxe-table@next

Get on unpkg and cdnjs

NPM

只使用表格

1// ...
2import VxeTable from 'vxe-table'
3import 'vxe-table/lib/style.css'
4// ...
5
6createApp(App).use(VxeTable).mount('#app')

使用表格与 UI 库

1// ...
2import VxeTable from 'vxe-table'
3import 'vxe-table/lib/style.css'
4// ...
5
6import VxeUI from 'vxe-pc-ui'
7import 'vxe-pc-ui/lib/style.css'
8// ...
9
10createApp(App).use(VxeUI).use(VxeTable).mount('#app')

CDN

使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效

1<!-- style -->
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
4<!-- vue -->
5<script src="https://cdn.jsdelivr.net/npm/vue"></script>
6<!-- table -->
7<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
8<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
9<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>

示例

1<template>
2  <div>
3    <vxe-table :data="tableData">
4      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
5      <vxe-column field="name" title="Name"></vxe-column>
6      <vxe-column field="role" title="Role"></vxe-column>
7      <vxe-colgroup title="Group1">
8        <vxe-column field="sex" title="Sex"></vxe-column>
9        <vxe-column field="address" title="Address"></vxe-column>
10      </vxe-colgroup>
11    </vxe-table>
12  </div>
13</template>
14
15<script lang="ts" setup>
16import { ref } from 'vue'
17
18const tableData = ref([
19  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
20  { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
21  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
22])
23</script>