1 Star 0 Fork 864

lifencheng / vxe-table

forked from xuliangzhan / 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 端表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

  • 设计理念

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

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

QQ 交流群

qq

浏览器支持

Edge Chrome Firefox Opera Safari
Latest ✔ Latest ✔ Latest ✔ Latest ✔ 8+ ✔

功能点

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

安装

版本:vue 3.x, 依赖库:xe-utils

npm install xe-utils vxe-table@next

Get on unpkg and cdnjs

npm

import { createApp } from 'vue'
import 'xe-utils'
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">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    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' }
    ])
    return {
      tableData
    }
  }
})
</script>

文档

💡 使用指南
👉 查看演示 👀备用地址
👉 查看文档 👀备用地址

运行项目

安装依赖

npm install

启动本地调试

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
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

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

搜索帮助