vue中的 vxe-table表格插件 实现树形数据表
一个 PC 端表格组件,大数据表格
vue vxe-table表格
vue vxe-table表格
2022-01-20 11:51·前端开发
可以自定义选择引入的模块,减少项目的体积;
多主题,多图标;
表格种类繁多;
扩展插件库;
vxe-table官网 https://vxetable.cn/#/table/start/install
查看 gitee https://gitee.com/xuliangzhan_admin/vxe-table
查github https://gitcode.net/mirrors/xuliangzhan/vxe-table?utm_source=csdn_github_accelerator
虽然不知道有什么用,但还是非常感谢码云的认可
功能点
基础表格
高级表格
斑马线条纹
多种边框
单元格样式
列宽拖动
最大高度
自适应宽高
固定列
多级表头
表尾数据
高亮行、列
序号
单选框
复选框
下拉选项
开关
排序
筛选
合并行或列
导入
导出
打印
显示/隐藏列
加载中
格式化内容
自定义插槽/模板
快捷菜单
展开行
分页
表单
工具栏
虚拟列表
增删改查
树表格
数据校验
数据代理
键盘导航
模态窗口
渲染器
虚拟滚动
vxe-table 官网地址
例子
可以使用 <vxe-column …> 或者 <vxe-table-column …> 定义列信息,两种方式都能使用
<template><div><vxe-table :data="tableData"><vxe-column type="index" width="60"></vxe-column><vxe-column field="name" title="Name"></vxe-column><vxe-column field="date" title="Date"></vxe-column><vxe-column field="address" title="Address"></vxe-column></vxe-table></div>
</template><script>
export default {data () {return {tableData: [{id: 10001,name: 'test1',sex: 'Man',date: '2019-05-01',address: 'address abc123'}]}}
}
</script>
安装vxe-table
npm install xe-utils vxe-table
在main.js中引入vxe-table
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/index.css';Vue.use(VXETable);
Vue.config.productionTip = false;new Vue({router,store,render: h => h(App)
}).$mount("#app");
因为是全局全量引入,所以可以直接在页面调用
<template><div><vxe-table border="inner" :data="tableData"><vxe-table-column type="seq" width="60" title="序号"></vxe-table-column><vxe-table-column field="name" title="姓名"></vxe-table-column><vxe-table-column field="sex" title="性别"></vxe-table-column><vxe-table-column field="address" title="籍贯"></vxe-table-column></vxe-table></div>
</template><script>
export default {name: "Home",data() {return {tableData: [{id: 10001,name: "张三",sex: "男",address: "上海市"},{id: 10002,name: "李四",sex: "女",address: "北京市"},{id: 10003,name: "王五",sex: "男",address: "天津市"}]};}
};
</script>
运行效果
树形数据表
<template><div><vxe-tableborderrow-id="id":data="tableData":tree-config="{ children: 'children', expandAll: true }"><vxe-table-columntype="seq"width="180"title="序号"tree-node></vxe-table-column><vxe-table-column field="name" title="导航名称"></vxe-table-column><vxe-table-column field="url" title="URL"></vxe-table-column></vxe-table></div>
</template>
<script>
export default {data() {return {tableData: [{seq: 1,name: "系统管理",url: "",children: [{seq: 10,name: "用户管理",url: "sys/user"},{seq: 11,name: "权限管理",url: "sys/right"},{seq: 12,name: "角色管理",url: "sys/role"}]},{seq: 2,name: "报表管理",url: "report"}]};}
};
</script>
效果如下
vue中的 vxe-table表格插件 实现树形数据表相关推荐
- vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化 此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
- bootstrap表格插件php,深入了解Bootstrap table表格插件(一)
这篇文章主要为大家介绍了第一次学习Bootstrap table表格插件的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 第一次使用Bootstrap-table这个表格插件,记录一下使用过程 ...
- bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...
- Vue中使用Transfer实现表格穿梭框(可搜索)
Vue中使用Transfer实现表格穿梭框(可搜索) 需求:使用Transfer实现带分页并可搜索的穿梭框.给不同用户分配不同的应用服务. 前端 1.注册组件(main.js) import { Tr ...
- vue中is属性搭配vuedraggable插件实现可拖动可视化大屏展示组件的自定义配置功能
最近有这样一个需求,将大屏上展示的东西都封装成独立的组件让用户自己可以自定义配置自己的组件位置及想要展示的组件,第一个我就想到通过is来实现,分享下我的思路及部分代码供大家参考. 先看下大概布局: 如 ...
- 1万条数据大概占多大空间_Vue - Table表格渲染上千数据优化
这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操作过程中不会出现UI卡顿或者最糟糕的情况,直接浏览器 ...
- table表格的使用(动态数据展示)
# table表格的使用(动态数据展示) ## 第一种方式<el-table :data="tableDataalllist" border style="widt ...
- mysql 查询不为0的数据_查询数据库中所有记录总数不为0的数据表名称
[如何查询postgreSQL 里面某个数据库中所有用户定义的数据表的名字@forandever 2011-11-131.通过命令行查询\d 数据库 -- 得到所有表的名字\d 表名 -- 得到表 ...
- 推荐一款简单易懂的VUE导出Tbale导出excel表格插件[ Table-excel ]
1.插件地址 将前端 table 导出 excel , 基于 exceljs + file-saver , 适用于所有表格 基于 数据源的定制化导出 具大佬所说,是公司给俩星期开发时间开发出来的导出插 ...
最新文章
- swift:使用协议protocol设置颜色,UIImage的切圆角ImageWithCornerRadius
- 市场忽略了糖价的爆发力
- python笔试题110题_《Python程序设计》试题库
- 单元测试之DBUnit的使用以及原理剖析
- C#超市管理系统试题
- 记一次反馈,把钉钉客服聊跑了
- 功能项目拼图将Java 9引入
- ios 主题切换 思路_IOS主题切换ThemeManager
- docker0: iptables: No chain/target/match by that name.
- 华师大数据科学考研_华东师范大学数据科学与工程需要复习哪些内容?
- JavaScript学习(六十二)—解析选项和序列化选项
- (转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- React 路由 中 BrowserHistory 刷新报404
- TCP/IP协议中IP数据保报文格式详解
- kindeditor上传图片php,使用 KindEditor 编辑器PHP语言本地上传图片提示错误
- IDEA注释模板配置
- 内存管理之页转换 virt_to_page
- 免拆机,Kindle固件版本5.10.3~5.13.3如何越狱?简单、易操作版
- IDR:通过迭代数据细化的自我监督图像去噪
- 华师大计算机科学与技术考研科目,2020华东师范大学计算机与软件工程考研初试科目、参考书目、招生人数汇总...