vue有纵向和横向表头表格
github源码地址：https://github.com/zhjing1019/moreTreeTable
使用方法
一、下载该组件
npm install more-tree-table在main.js里引用该组件
import moreTreeTable from "more-tree-table"Vue.use(moreTreeTable);二、多表头表格
<more-tree-table :colData="colHead" :rowData="rowHead" :tableValue="tableValue1"></more-tree-table>colData: 为Array，是指竖向表头的数据，可以是树形结构的表头 rowData: 为Array，是指横向表头的数据 tableValue: 为Object，是指表格的数据，tableValue中的key为 ’横向表头的id__纵向表头的id‘ colData的值和rowData的值
rowData: [{id: "1111",name: "测试1",children: [{id: "1111-1",name: "测试1-1",children: [{id: "1111-1-2",name: "测试1-1-2",},{id: "1111-1-3",name: "测试1-1-4",},]},{id: "1111-2",name: "测试1-2",children: [{id: "1111-2-2",name: "测试1-2-2",},{id: "1111-2-3",name: "测试1-2-4",},]},{id: "1111-3",name: "测试1-3",children: [{id: "1111-3-2",name: "测试1-3-2",},{id: "1111-3-3",name: "测试1-3-4",},]},{id: "1111-4",name: "测试1-4",},]},{id: "2222",name: "测试1",children: [{id: "2222-1",name: "测试1-1",children: [{id: "2222-1-2",name: "测试1-1-2",},{id: "2222-1-3",name: "测试1-1-4",},]},{id: "2222-2",name: "测试1-2",children: [{id: "2222-2-2",name: "测试1-2-2",},{id: "2222-2-3",name: "测试1-2-4",},]},{id: "2222-3",name: "测试1-3",children: [{id: "2222-3-2",name: "测试1-3-2",},{id: "2222-3-3",name: "测试1-3-4",},]},{id: "2222-4",name: "测试1-4",},]},],colData: [{id: "1111",name: "测试1",children: [{id: "1111-1",name: "测试1-1",children: [{id: "1111-1-2",name: "测试1-1-2",},{id: "1111-1-3",name: "测试1-1-4",},]},{id: "1111-2",name: "测试1-2",children: [{id: "1111-2-2",name: "测试1-2-2",},{id: "1111-2-3",name: "测试1-2-4",},]},{id: "1111-3",name: "测试1-3",children: [{id: "1111-3-2",name: "测试1-3-2",},{id: "1111-3-3",name: "测试1-3-4",},]},{id: "1111-4",name: "测试1-4",},]},{id: "2222",name: "测试1",children: [{id: "2222-1",name: "测试1-1",children: [{id: "2222-1-2",name: "测试1-1-2",},{id: "2222-1-3",name: "测试1-1-4",},]},{id: "2222-2",name: "测试1-2",children: [{id: "2222-2-2",name: "测试1-2-2",},{id: "2222-2-3",name: "测试1-2-4",children: [{id: "2222-2-3-1",name: "测试1-2-2",},{id: "2222-2-3-2",name: "测试1-2-2",},]},]},{id: "2222-3",name: "测试1-3",children: [{id: "2222-3-2",name: "测试1-3-2",},{id: "2222-3-3",name: "测试1-3-4",},]},{id: "2222-4",name: "测试1-4",},]},],
tableValue的值
//多项表头的数据tableValue1: {'1111-1-2__1111-1-2': '测试数据1','1111-1-3__1111-1-3': '测试数据2','1111-2-2__1111-2-2': '测试数据3','1111-2-3__1111-2-3': '测试数据4','1111-3-2__1111-3-2': '测试数据5','2222-3-3__2222-3-3': "测试数据6",'2222-4__2222-4': '测试数据7'},
三、纵向表头的表格
<more-tree-table :colData="colHead" :tableValue="tableValue2"></more-tree-table>colData: 为Array，是指竖向表头的数据，可以是树形结构的表头
tableValue: 为Array，数组的每一项为对象，对象中的key和纵向的id对应
//纵向表头数据tableValue2: [{'1111-1-2': "1",'1111-1-3': "2",'1111-2-2': "3",'1111-2-3': "4",'1111-3-2': "5",'2222-3-3': "6",'2222-4': "7"},],colData的值同上
四、横向表头的表格
<more-tree-table :rowData="rowHead" :tableValue="tableValue2"></more-tree-table>rowData: 为Array，是指横向向表头的数据，可以是树形结构的表头 tableValue: 为Array，数组的每一项为对象，对象中的key和横向的id对应
rowData的值同上
tableValue的值
//横向表头数据tableValue3: [{'1111-1-2': "1",'1111-1-3': "2",'1111-2-2': "3",'1111-2-3': "4",'1111-3-2': "5",'2222-3-3': "6",'2222-4': "7"},],
欢迎关注我的个人技术公众号
vue有纵向和横向表头表格相关推荐
- vue项目导出自定义多级表头表格
基于Vue项目实现自定义多表头表格导出 本方法在export2Excel.js文件里面改动较少,适用性较强 安装依赖: npm install -S file-saver npm install -S ...
- html表格纵向变横向,html表格，表头竖向固定，横向滚动的例子
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 head:first-child+body thead[class].fixedHeader th { width: 200px } head:first ...
- react antd实现竖向表头表格
平时大多做的表格都是横向表头的表格,突然有一次需求是竖向表头的表格,之后发现了Descriptions这个组件,这个组件的名称是描述列表,一开始都没想到这个会跟表格有关系 实现的竖向表头表格 代码如下 ...
- php多表头表格,HTML多表头表格代码示例
1.多表头表格代码 多表头表格 body{ width:98%; height:100%; font-size:12px; background-color:#FCF; text-align:cent ...
- mysql 横向排列,mysql横向转纵向、纵向转横向排列的方法
初始化数据 DROP TABLE IF EXISTS `test_01`; CREATE TABLE `test_01` ( `id` int(0) NOT NULL, `user` varchar( ...
- php数组竖转横,数组纵向转横向怎么实现
数组纵向转横向如何实现啊 array( 6=>array(5=>'黑xx', 42=>'XXL'), 7=>array(5=>'黑xx', 40=>'XL'), 8 ...
- 动态内表(纵向变横向)
"纵向变横向 DATA: js TYPE c LENGTH 2 . DATA: gsday TYPE string . DATA: sp_cc TYPE char5. SORT ...
- Matlab纵向比和横向比,宽度是横向还是纵向-纵向比和横向比-纵向是横向还是竖向...
仅靠文字,西湖说不清楚. 还是上图吧. 如下图所示: 其中的x为横向宽度.y为纵向深度. 多层横向全宽挖掘法为什幺要留施工便道 施工便道是用于将来基础施工时方便机械设备,人员进入场地的.如果没有便道将 ...
- JS实现点击表头表格自动排序（含数字、字符串、日期）
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...
最新文章
- 手动部署OpenStack环境（五：新建网络及部署虚拟机）
- Boost库之asio io_service以及run、run_one、poll、poll_one区别
- PHP $_REQUEST获取表单提交的代码
- php中$_get和$_post如何使用,怎么使用超级全局变量$_POST与$_GET
- Word2019上面的MathType7.4插件忽然消失了【终极解决办法记录】
- 双向循环链表【数据结构】
- 五大数据库理念，读懂亚马逊云科技的数据库布局
- （229）DPU加速数据处理
- php写进度条原理,php实现进度条原理
- php5.5 pdo mysql_PHP5中PDO的简单使用
- linux内核奇遇记之md源代码解读之五
- simulink教程(自动控制原理)
- 电子烟监管风暴来临：还会有下一个悦刻吗？
- Room使用遇到的问题
- JAVA数据结构之红-黑树
- 【华为联机对战服务】如何保存及查看联机对战SDK日志？
- java8的LocalDate、LocalDateTime和之前的Date、Calendar
- Mysql 默认密码
- 货物进出口的实务流程
- 每日一记 关于Python的准备知识、快速上手