451 Star 4.3K Fork 858

GVPxuliangzhan / vxe-table

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

vxe-table

简体中文 | 繁體中文 | English

star npm version npm build npm downloads issues issues closed pull requests pull requests closed npm license

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

  • 设计理念

    • 面向现代浏览器,高效的简洁 API 设计
    • 模块化表格、按需加载
    • 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
  • 计划

    • v1.0 基于 vue2.6,支持所有主流的浏览器,实现表格的一切实用的功能
    • v2.0 基于 vue2.6,支持所有主流的浏览器,同时兼具功能与性能
    • v3.0 基于 vue2.6,支持现代浏览器并保留兼容 IE11
    • v4.0 基于 vue3.x,只支持现代浏览器,不支持 IE
    • 下一阶段:sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化

浏览器支持

Edge Chrome Firefox Opera Safari
80+ ✔ 80+ ✔ 90+ ✔ 75+ ✔ 10+ ✔

功能点

  • 基础表格
  • 配置式表格
  • 基础表单
  • 配置式表单
  • 斑马线条纹
  • 多种边框
  • 单元格样式
  • 列宽拖动
  • 最小/最大高度
  • 自适应宽高
  • 固定列
  • 多级表头
  • 表尾数据
  • 高亮行或列
  • 序号
  • 单选框
  • 复选框
  • 下拉选项
  • 开关
  • 排序
  • 多字段排序
  • 筛选
  • 合并单元格
  • 合并表尾
  • 导入/导出/打印
  • 显示/隐藏列
  • 加载中
  • 格式化内容
  • 自定义插槽 - 模板
  • 快捷菜单
  • 展开行
  • 分页
  • 工具栏
  • 下拉容器
  • 虚拟列表
  • 虚拟树
  • 增删改查
  • 数据校验
  • 数据代理
  • 键盘导航
  • 弹窗
  • 渲染器
  • 虚拟滚动
  • 虚拟合并
  • CSS 变量主题
  • (插件) 单元格区域选取
  • (插件) 单元格复制/粘贴
  • (插件) 单元格查找和替换

安装

版本:vue 3.x

npm install vxe-table@next

Get on unpkg and cdnjs

npm

import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App).use(VXETable).mount('#app')

CDN

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

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table@next"></script>

示例

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
</script>

在线文档

👉 官网文档

参与文档完善、补充详细文档

💡 官网文档源码

QQ 交流群

该群供大家交流問題,如果群人数已满,将会不定期剔除不活跃的。

qq

运行项目

安装依赖

npm run update

启动本地调试

npm run serve

编译打包,生成编译后的目录:es,lib

npm run lib

License

MIT © 2019-present, Xu Liangzhan

MIT License Copyright (c) 2019 Xu Liangzhan Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

vxe-table vue 表单/表格解决方案 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版 (177)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/xuliangzhan_admin/vxe-table.git
git@gitee.com:xuliangzhan_admin/vxe-table.git
xuliangzhan_admin
vxe-table
vxe-table
master

搜索帮助

14c37bed 8189591 565d56ea 8189591