vue用html做报表,Vue配置生成无限分割的表格，可快速实现任意复杂报表

GitHub项目：infinite-split-table

通过代码配置无限分割表格，可快速实现任意布局

配置说明

每一行，每一列都可以当做一个节点

每个节点里可嵌套节点

每个节点必须由id,type,data三个字段组成

id：唯一值

type：节点类型

data：节点数据

type可选类型：

row：行

column：列

label：标签

其他(自行扩展)

样式配置

width：节点宽(像素或百分比，父节点type为row时生效)

height：节点高(像素或百分比，父节点为column时生效)

其他(自行扩展)

示例节点

{

id:13,

type:'label',

data:'8',

width:'150px'

}

示例配置

tree_data:{

type:'column',

id:0,

data:[

{

id:1,

type:'row',

data:[

{

id:2,

type:'label',

data:'1',

width:'20%'

{

id:3,

type:'label',

data:'2'

{

id:4,

type:'column',

width:'20%',

data:[

{

id:5,

type:'row',

data:[

{

id:7,

type:'label',

data:'3'

{

id:8,

type:'label',

data:'4'

]

{

id:6,

type:'row',

data:[

{

id:9,

type:'label',

data:'5'

{

id:10,

type:'label',

data:'6'

]

}

{

id:11,

type:'label',

data:'7'

{

id:12,

type:'row',

data:[

{

id:13,

type:'label',

data:'8',

width:'150px'

{

id:14,

type:'label',

data:'9'

{

id:15,

type:'label',

data:'10',

width:'150px'

{

id:16,

type:'label',

data:'11'

]

}

]

}

效果展示

示例配置效果

复杂配置效果

作者：秦羽

vue用html做报表,Vue配置生成无限分割的表格，可快速实现任意复杂报表相关推荐

报表动态配置的技术实现
1.1.1. 简介报表是数据汇总统计的主要展示形式之一,在所有项目中,作为重要的输出结果,报表能很好的展现业务的状态,用户可根据报表展示的结果进行相关的分析与决策.在我们的项目开发过程中,主要使用H ...
Vue学习笔记之13-webpack的配置傻子看了都会配置的超详细教程
本文中所使用的webpack配置相关版本如下, 如果你想要用新一点的版本, 可能需要根据报错的提示,安装额外的内容 webpack 3.6.0 css-loader 2.0.2 style-loade ...
（超全）Vue.js学习笔记—webpack基础配置（webpack4+babel7+vue2）
webpack基础配置&&单文件组件与vue-loader 参考<Vue,js>实战(梁灏编著) 笔者近期学习Vue.js进阶篇,参考教程流程完成webpack.vue.b ...
使用karma+mocha+chai为vue组件库做单元测试
前言单元测试,这一环节对我们的应用的重要性不言而喻,它能很大程度确保我们项目运行的健壮性.因此,前一段时间,笔者公司要求现有的vue搭建的npm组件库做单元测试.之前,笔者对单元测试做过了解,一直想 ...
乐鑫Esp32学习之旅 18 入门京东微联·小京鱼的控制面板H5开发，读懂vue语法，做自己的控制页面。
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...
vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
vue cli4 vue2 多页面打包配置与坑点
前言: 一直以来都没用上多页面打包,这次遇到个业务特殊情况,想到用多页面打包的方案来解决,于是按照vue cli 官方文档在自己的项目上配置跑了一下,果然一跑就是一堆问题.只能说事情总是比我们想象的要 ...
jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭转发链接:https://zhuanlan.zhihu.com/p/102668383 前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...

vue用html做报表,Vue配置生成无限分割的表格，可快速实现任意复杂报表

vue用html做报表,Vue配置生成无限分割的表格，可快速实现任意复杂报表相关推荐

最新文章

热门文章