VXE Table的简介及使用教程

您所在的位置：网站首页 › js虚拟列表合并单元格 › VXE Table的简介及使用教程

VXE Table的简介及使用教程

2023-10-27 16:26| 来源: 网络整理| 查看: 265

VXE Table 是一个基于Vue的表格框架，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

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

功能及特点

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

Npm

npm i xe-utils vxe-table

Yarn

yarn add xe-utils vxe-table

浏览器

使用

引入并注册

import Vue from 'vue' import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' Vue.use(VXETable) // 给 vue 实例挂载内部对象，例如： Vue.prototype.$XModal = VXETable.modal Vue.prototype.$XPrint = VXETable.print Vue.prototype.$XSaveFile = VXETable.saveFile Vue.prototype.$XReadFile = VXETable.readFile

基础使用

html

居左居中居右

export default { data () { return { allAlign: null, tableData: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai' } ] } } }

示例

【本文地址】

VXE Table的简介及使用教程

VXE Table的简介及使用教程

今日新闻

推荐新闻