组件插件
强大的表格组件
全新AI富文本编辑器 AiEditor
vue3使用AiEditor
一个WEB 打印的JS组件,支持数据分组,快速分页批量预览,打印,转PDF,移动端,PC端
适配的图表库,可运行到web、安卓、ios
vue3使用hanzi-writer
中文笔画库
vue3使用uCharts
本文档使用 MrDoc 发布
-
+
首页
强大的表格组件
今天给大家介绍一款基于 vue 的强大表单和表格组件,上手简单,功能丰富,简直是后端开发者的福音,通过这个表单、表格解决方案,可以让不太熟悉前端开发的小伙伴们快速搭建前端页面,无论是接私活儿还是搞自己的产品,都是一个不错的选择。 # 简介 vxe-table一个基于 vue 的 PC 端表单/表格组件,支持增删改查、虚拟树、列拖拽、懒加载、快捷菜单、数据校验、导入/导出/打印、表单渲染、自定义模板、渲染器、JSON 配置式... 目前该组件完全开源,在Gitee上有4.5k star,可以说非常成熟!同时该组件兼容性非常好,支持目前主流的现代浏览器,包括Edge。  # 功能点 - • 基础表格 - • 配置式表格 - • 斑马线条纹 - • 多种边框 - • 单元格样式 - • 列宽拖动 - • 最小/最大高度 - • 自适应宽高 - • 固定列 - • 多级表头 - • 表尾数据 - • 高亮行或列 - • 序号 - • 单选框 - • 复选框 - • 排序 - • 多字段排序 - • 筛选 - • 合并单元格 - • 合并表尾 - • 导入/导出/打印 - • 显示/隐藏列 - • 拖拽/自定义列排序 - • 加载中 - • 格式化内容 - • 自定义插槽 - 模板 - • 快捷菜单 - • 展开行 - • 工具栏 - • 虚拟树 - • 增删改查 - • 数据校验 - • 数据代理 - • 键盘导航 - • 渲染器 - • 虚拟滚动 - • 虚拟合并 - • CSS 变量主题 # 使用 ### 安装 版本:vue 3.x ```bash npm install vxe-table@next ``` ### 引入 只使用表格 ```js // ... import VxeTable from 'vxe-table' import 'vxe-table/lib/style.css' // ... createApp(App).use(VxeTable).mount('#app') ``` 使用表格与 UI 库 ```js // ... importVxeTablefrom'vxe-table' import'vxe-table/lib/style.css' // ... importVxeUIfrom'vxe-pc-ui' import'vxe-pc-ui/lib/style.css' // ... createApp(App).use(VxeUI).use(VxeTable).mount('#app') ``` ### 示例 ```vue <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> ``` # 功能展示 多选表格  多选树列表  树结构筛选  多种边框与单元格样式  导入导出打印  # 总结 以上功能展示只挑选了几个常用的,这款开源组件基本涵盖了所有可能用到的场景组件,引入它可以大大减少前端开发,只需要对接API即可实现一个简洁大方的页面,非常值得一试。 **开源地址:** https://gitee.com/xuliangzhan_admin/vxe-table > 原文地址 https://mp.weixin.qq.com/s/m0OMRbX1TQDDts2PGANfLQ
admin
2024年7月2日 11:54
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码