Skip to content
BranchesTags

Repository files navigation

vxe-table

简体中文 | 繁體中文 | English

starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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

浏览器支持

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

功能点

  • 基础表格
  • 高级表格
  • 斑马线条纹
  • 多种边框
  • 单元格样式
  • 列宽拖动
  • 最大高度
  • 自适应宽高
  • 固定列
  • 多级表头
  • 表尾数据
  • 高亮行或列
  • 序号
  • 单选框
  • 复选框
  • 下拉选项
  • 开关
  • 排序
  • 多字段组合排序
  • 筛选
  • 合并单元格
  • 合并表尾
  • 导入/导出/打印
  • 显示/隐藏列
  • 加载中
  • 格式化内容
  • 自定义插槽 - 模板
  • 快捷菜单
  • 展开行
  • 分页
  • 表单
  • 工具栏
  • 下拉容器
  • 虚拟列表
  • 虚拟树
  • 增删改查
  • 数据校验
  • 数据代理
  • 键盘导航
  • 弹窗
  • 渲染器
  • 虚拟滚动
  • 虚拟合并
  • (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')

CDN

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

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

示例

<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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

About

vxe-table vue 表格解决方案

vxetable.cn

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - undefinedYu/vxe-table: vxe-table vue 表格解决方案 · GitHub
Skip to content
BranchesTags
Repository files navigation
vxe-table
简体中文 | 繁體中文 | English
starnpm versionnpm buildnpm downloadsissuesissues closedpull requestspull requests closednpm 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
浏览器支持
EdgeChromeFirefoxOperaSafari
80+ ✔80+ ✔90+ ✔75+ ✔10+ ✔
功能点
  •  基础表格
  •  高级表格
  •  斑马线条纹
  •  多种边框
  •  单元格样式
  •  列宽拖动
  •  最大高度
  •  自适应宽高
  •  固定列
  •  多级表头
  •  表尾数据
  •  高亮行或列
  •  序号
  •  单选框
  •  复选框
  •  下拉选项
  •  开关
  •  排序
  •  多字段组合排序
  •  筛选
  •  合并单元格
  •  合并表尾
  •  导入/导出/打印
  •  显示/隐藏列
  •  加载中
  •  格式化内容
  •  自定义插槽 - 模板
  •  快捷菜单
  •  展开行
  •  分页
  •  表单
  •  工具栏
  •  下拉容器
  •  虚拟列表
  •  虚拟树
  •  增删改查
  •  数据校验
  •  数据代理
  •  键盘导航
  •  弹窗
  •  渲染器
  •  虚拟滚动
  •  虚拟合并
  •  (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'importVXETablefrom'vxe-table'import'vxe-table/lib/style.css'createApp(App).use(VXETable).mount('#app')
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;

使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --><linkrel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"><!-- 引入脚本 --><scriptsrc="https://unpkg.com/xe-utils"></script><scriptsrc="https://unpkg.com/vxe-table@next"></script>
示例
<template><div><vxe-table:data="tableData"><vxe-columntype="seq" title="Seq" width="60"></vxe-column><vxe-columnfield="name" title="Name"></vxe-column><vxe-columnfield="role" title="Role"></vxe-column><vxe-colgrouptitle="Group1"><vxe-columnfield="sex" title="Sex"></vxe-column><vxe-columnfield="address" title="Address"></vxe-column></vxe-colgroup></vxe-table></div></template><scriptlang="ts">import{defineComponent,ref}from'vue'exportdefaultdefineComponent({setup(){consttableData=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
About
vxe-table vue 表格解决方案
vxetable.cn
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages