精华内容
下载资源
问答
  • js table 多级表头

    2021-07-26 09:52:17
    代码 <table> <tr> <th rowspan='2'>1</th> <th rowspan='2'>2</th> <th rowspan='2'>3</th> <th rowspan='2'>4<...th rowspan='2'&g

    代码

    <table>
            <tr>
                <th rowspan='2'>1</th>
                <th rowspan='2'>2</th>
                <th rowspan='2'>3</th>
                <th rowspan='2'>4</th>
                <th rowspan='2'>5</th>
                <th rowspan='2'>6</th>
                <th colspan='1'>7</th>
                <th rowspan='2'>8</th>
                <th rowspan='2'>9</th>
                <th colspan='3'>0</th>
            </tr>
            <tr>
                <th>a</th>
                <th>b</th>
                <th>c</th>
                <th>d</th>
            </tr>
          
        </table>
    

    效果
    在这里插入图片描述

    展开全文
  • js导出复杂表头(多级表头)的excel <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table ...

    js导出复杂表头(多级表头)的excel

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <table border>
            <tr style="text-align: center;">
                <th rowspan="2">姓名</th>
                <th colspan="2">一月</th>
                <th colspan="2">二月</th>
            </tr>
            <tr style="text-align: center;">
                <th>收入</th>
                <th>支出</th>
                <th>收入</th>
                <th>支出</th>
            </tr>
            <tr style="text-align: center;">
                <td>张三</td>
                <td>10元</td>
                <td>20元</td>
                <td>15元</td>
                <td>25元</td>
            </tr>
            <tr style="text-align: center;">
                <td>李四</td>
                <td>100元</td>
                <td>200元</td>
                <td>150元</td>
                <td>250元</td>
            </tr>
        <table>
        <button onclick="tableToExcel()"">导出excel</button>
        <script type="text/javascript">
            function tableToExcel(){
                //要导出的数据
                var exportData = [
                    {
                        name: '张三',
                        month1: {
                            income: '10元',
                            outlay: '20元'
                        },
                        month2: {
                            income: '15元',
                            outlay: '25元'
                        }
                    },
                    {
                        name: '李四',
                        month1: {
                            income: '100元',
                            outlay: '200元'
                        },
                        month2: {
                            income: '150元',
                            outlay: '250元'
                        }
                    }
                ]
                // 自定义的表格
                var tableStr = ` <tr style="text-align: center;">
                                    <th rowspan="2">姓名</th>
                                    <th colspan="2">一月</th>
                                    <th colspan="2">二月</th>
                                </tr>
                                <tr style="text-align: center;">
                                    <th>收入</th>
                                    <th>支出</th>
                                    <th>收入</th>
                                    <th>支出</th>
                                </tr>`;
                for(let item of exportData) {
                    tableStr += `<tr style="text-align: center;">
                                    <td>${item.name}</td>
                                    <td>${item.month1.income}</td>
                                    <td>${item.month1.outlay}</td>
                                    <td>${item.month2.income}</td>
                                    <td>${item.month2.outlay}</td>
                                </tr>`;
                }
                //Worksheet名
                var worksheet = 'Sheet1'
                var uri = 'data:application/vnd.ms-excel;base64,';
                // 真正要导出(下载)的HTML模板
                var exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
                                xmlns="http://www.w3.org/TR/REC-html40">
                                    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                                        <x:Name>${worksheet}</x:Name>
                                            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                                        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                                    </head>
                                    <body>
                                        <table syle="table-layout: fixed;word-wrap: break-word; word-break: break-all;">${tableStr}</table>
                                    </body>
                                </html>`;
                //下载模板
                window.location.href = uri + base64(exportTemplate)
            };
            //输出base64编码
            function base64 (s) { 
                return window.btoa(unescape(encodeURIComponent(s))) 
            };
        </script>
    </body>
    </html>
    

    ps:要想修改导出的excel表中表格的格式,可直接在上面的模板中给相应的table、tr、td、th等标签添加css样式即可。

    展开全文
  • 一、效果图二、封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成DynamicTable.vueimport TableColumn from './TableColumn'export default {props: {// ...

    一、效果图

    771c1544a821dda930315de74d29ddda.png

    a63a4239dd94cf5bcda58bf8d5550d84.png

    二、封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成

    DynamicTable.vue

    import TableColumn from './TableColumn'

    export default {

    props: {

    // 表格的数据

    tableData: {

    type: Array,

    required: true

    },

    // 多级表头的数据

    tableHeader: {

    type: Array,

    required: true

    },

    // 表格的高度

    height: {

    type: String,

    default: '300'

    }

    },

    components: {

    TableColumn

    }

    }

    TableColumn.vue

    export default {

    name: 'tableColumn',

    props: {

    coloumnHeader: {

    type: Object,

    required: true

    }

    }

    }

    三、使用

    HTML代码

    JS代码

    import DynamicTable from './components/DynamicTable'

    export default {

    components: {

    DynamicTable

    },

    data () {

    return {

    searchForm: {

    month: getMonth(),

    serviceCategory: '1'

    },

    dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量

    // 表数据

    tableData: [

    {

    districtName: '1',

    timeDimension: '2',

    residentPopNum: '3',

    residentPopDst: '4',

    liveLandArea: '5',

    liveLandDst: '6',

    employmentLandArea: '7',

    employmentLandDst: '8'

    }

    ],

    // 表头数据

    tableConfig: [

    {

    id: 100,

    label: '一级表头',

    prop: '',

    children: [

    {

    id: 110,

    label: '二级表头1',

    prop: 'districtName'

    },

    {

    id: 120,

    label: '二级表头2',

    prop: 'timeDimension'

    }

    ]

    },

    {

    id: 200,

    label: '一级表头1',

    prop: '',

    children: [

    {

    id: 210,

    label: '二级表头2',

    prop: '',

    children: [

    {

    id: 211,

    label: '三级表头3',

    prop: 'residentPopNum'

    },

    {

    id: 212,

    label: '三级表头',

    prop: 'residentPopDst'

    }

    ]

    }

    ]

    },

    {

    id: 300,

    label: '一级表头1',

    prop: '',

    children: [

    {

    id: 310,

    label: '二级表头2',

    prop: '',

    children: [

    {

    id: 311,

    label: '三级表头3',

    prop: 'liveLandArea'

    },

    {

    id: 312,

    label: '三级表头3',

    prop: 'liveLandDst'

    }

    ]

    },

    {

    id: 320,

    label: '二级表头1',

    prop: '',

    children: [

    {

    id: 321,

    label: '三级表头3',

    prop: 'employmentLandArea'

    },

    {

    id: 322,

    label: '三级表头3',

    prop: 'employmentLandDst'

    }

    ]

    }

    ]

    }

    ]

    }

    },

    methods: {

    // 服务类型改变的时候,需要重新请求表头信息和表格数据

    handleServiceCategoryChange (val) {

    // 设置dynamicTableShow为false,使得DynamicTable组件重新渲染

    this.dynamicTableShow = false

    if (val === '1') {

    this.tableData = [

    {

    districtName: '1',

    timeDimension: '2',

    residentPopNum: '3',

    residentPopDst: '4',

    liveLandArea: '5',

    liveLandDst: '6',

    employmentLandArea: '7',

    employmentLandDst: '8'

    }

    ]

    this.tableConfig = [

    {

    id: 100,

    label: '一级表头',

    prop: '',

    children: [

    {

    id: 110,

    label: '二级表头1',

    prop: 'districtName'

    },

    {

    id: 120,

    label: '二级表头2',

    prop: 'timeDimension'

    }

    ]

    },

    {

    id: 200,

    label: '一级表头1',

    prop: '',

    children: [

    {

    id: 210,

    label: '二级表头2',

    prop: '',

    children: [

    {

    id: 211,

    label: '三级表头3',

    prop: 'residentPopNum'

    },

    {

    id: 212,

    label: '三级表头',

    prop: 'residentPopDst'

    }

    ]

    }

    ]

    },

    {

    id: 300,

    label: '一级表头1',

    prop: '',

    children: [

    {

    id: 310,

    label: '二级表头2',

    prop: '',

    children: [

    {

    id: 311,

    label: '三级表头3',

    prop: 'liveLandArea'

    },

    {

    id: 312,

    label: '三级表头3',

    prop: 'liveLandDst'

    }

    ]

    },

    {

    id: 320,

    label: '二级表头1',

    prop: '',

    children: [

    {

    id: 321,

    label: '三级表头3',

    prop: 'employmentLandArea'

    },

    {

    id: 322,

    label: '三级表头3',

    prop: 'employmentLandDst'

    }

    ]

    }

    ]

    }

    ]

    } else {

    this.tableData = [

    {

    districtName: '111',

    timeDimension: '222'

    }

    ]

    this.tableConfig = [

    {

    id: 100,

    label: '一级表头',

    prop: '',

    children: [

    {

    id: 110,

    label: '二级表头1',

    prop: 'districtName'

    },

    {

    id: 120,

    label: '二级表头2',

    prop: 'timeDimension'

    }

    ]

    }

    ]

    }

    // 此处是DOM还没有更新,此处的代码是必须的

    this.$nextTick(() => {

    // DOM 现在更新了

    this.dynamicTableShow = true

    })

    }

    }

    }

    .policy-wrapper{

    margin-top: 10px;

    }

    .result-wrapper{

    margin-top: 22px;

    }

    vue&plus;element-ui动态生成多级表头,并且将有相同字段下不同子元素合并为同一个

    element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = []; for (var key in ob ...

    MVC5&plus;EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

    JAVA操作Excel 可配置,动态 生成复杂表头 复杂的中国式报表表头

    转载:开源社区http://www.oschina.net/code/snippet_1424099_49530?p=2代码] [Java]代码 该代码实现了Excel复杂表头的生成 基于sql se ...

    vue2&period;0&plus;Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

    WPF &plus; RDLC &plus; 动态生成列 &plus; 表头合并

    如下,评论超过20条,马上发代码*(੭*ˊᵕˋ)੭*ଘ,效果如下: 代码逻辑简单. WPF使用RDLC需要使用如下DLL 新建WPF 窗体,黏贴下大概如下

    vue&plus;element UI递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

    使用aspose&period;cell动态导出多表头 EXCEL

    效果图: 前台调用: using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

    第三方控件netadvantage UltraWebGrid如何生成多级跨行表头个人总结

    1.生成多级表头,横向和纵向跨度. 1>对于有字段的的表头合并:也就是(工期.项目经理信息除外)可以在前台通过spanx和spany属性控制.对于空字段(工资.项目经理必须通过后台动态添加),而 ...

    MVC 5 &plus; EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

    随机推荐

    IOS &lowbar;&lowbar; 面试题

    1.下面四种内部排序算法中哪一种在最差的情况下时间复杂度最高:(B) A.快速排序 B.冒泡排序 C.堆排序 D.归并排序   2.Shell中,将command1的输出作为command2的输入应该 ...

    AD中各层的说明

    PCB各层说明: 1.丝印层(OverLay,Silkscreen):有顶层丝印和底层丝印.用来画器件轮廓,器件编号和一些图案等. 2.信号层(SignalLayer):对于两层板,主要是TopLay ...

    IT行业果真跳槽快吗?

    近年来IT行业越来越火爆,许多人也开始炒,月入万元不是梦,随随便便拿高薪之类的文章层出不穷,许多的青少年甚至中年人开始关注这块,许多人选择去学习it行业,也朝着月入万元的目标前进,然而,曾几何时,月入 ...

    git subtree用法&lpar;转&rpar;

    git subtree用法 一.使用场景 例如,在项目Game中有一个子目录AI.Game和AI分别是一个独立的git项目,可以分开维护.为了避免直接复制粘贴代码,我们希望Game中的AI子目录与AI ...

    【Android】 PopupWindow使用小结

    PopupWindow的很多用法网上比较多,我就不做过多解释了,只说下可能会遇到的问题,以及解决办法: 1.PopupWindow中的listview无响应 这个主要是因为show写在了set ...

    Javascript通过className选择元素

    NSData的一些用法

    //NSData遵循NSCopying NSCoding协议,它提供面向对象的数组存储为字节 //适用与读写文件,而读写文件的时候需要一个缓冲区,而NSDate就提供了这么一个缓存区 //定义一个ch ...

    SharePoint solution and feature management with PowerShell

    /* Author: Jiangong SUN */ Hello, I want to introduce SharePoint solution and feature management usi ...

    ASP&period;NET MVC 5– 采用Wijmo MVC 5模板1创建应用程序分钟

    启用 采用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用,首先要做的就是安装pid=4&from=MVC4DOC">Studio f ...

    avalon组件

    如何做一个avalon组件 在avalon1.5中改用更直观的自定义标签来声明组件,废掉ms-widget,引入更强大的生命周期管理,可以让组件任意套嵌. 组件是由JS,HTML,CSS构成 JS 以 ...

    展开全文
  • quasar框架下的多级表头

    千次阅读 2019-09-03 18:15:21
    多级表头—quasar 前一段时间,项目上遇到的需求 : 实现一些table多级表头.然而quasar框架下table比较弱,在做这个表头时候遇到些麻烦,便记录一下 直接上代码 //一级表头 <q-tr> <q-th> &...

    多级表头—quasar

    1. 前一段时间,项目上遇到的需求 : 实现一些table多级表头.然而quasar框架下table比较弱,在做这个表头时候遇到些麻烦,便记录一下
    2. 直接上代码
    					//一级表头
    					   <q-tr>
                              <q-th>
                                <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                              </q-th>
                              <q-th rowspan="2" align="center">编码</q-th>
                              <q-th rowspan="2" align="center">名称</q-th>
                              <q-th rowspan="2" align="center">不含税价</q-th>
                              <q-th rowspan="2" align="center">供应商</q-th>
                              <q-th rowspan="2" align="center">P结果</q-th>
                              <q-th rowspan="2" align="center">T结果</q-th>
                              <q-th colspan="2" align="center">R结论</q-th>
                              <div v-for="(item,index) in maxLength" style="display: contents">
                                <q-th colspan="11" align="center" style="border-right:1px solid #ccc">{{ index + 1 }}次报价
                                </q-th>
                              </div>
                            </q-tr>
                        //二级表头
                            <q-tr>
                              <q-th align="center">工程师</q-th>
                              <q-th align="center">SQE</q-th>
                              <div v-for="(item,index) in maxLength" style="display: contents">
                                <q-th align="center">到厂价</q-th>
                                <q-th align="center">原材料</q-th>
                                <q-th align="center">加工装配费</q-th>
                                <q-th align="center">废品</q-th>
                                <q-th align="center">期间费用</q-th>
                                <q-th align="center">利润</q-th>
                                <q-th align="center">物流费</q-th>
                                <q-th align="center">包装费</q-th>
                                <q-th align="center">开发费</q-th>
                                <q-th align="center">模具费</q-th>
                                <q-th align="center" style="border-right:1px solid #ccc">报价附件</q-th>
                              </div>
                            </q-tr>
                         //列表渲染
                         <template slot="body" slot-scope="props">
                          <q-tr
                            :props="props"
                          >
                            <q-td >
                              <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                            </q-td> 
                            <q-td :rowspan="props.row.supplierNum" v-if="props.row.supplierNum" key="sorCode" :props="props" >
                              {{ props.row.rfqItemEntity.matCode }}
                            </q-td>
                          	 ...
                            <q-td key="sqeTrStatus" :props="props" >
                              <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == 1" dense square color="positive">通过</q-chip>
                              <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == -1" dense square color="negative">不通过</q-chip>
                              <q-chip v-if="props.row.rfqSupplierEntity.sqeTrStatus == '' || props.row.rfqSupplierEntity.sqeTrStatus == null" dense square color="negative">N/A</q-chip>
                            </q-td>
                            <div v-for="item in props.row.listMap" style="display: contents">
                              <q-td key="totalPrice" :props="props">
                                {{ item.totalPrice }}
                              </q-td>
                              ...
                              <q-td key="mouldPrice" :props="props">
                                {{ item.mouldPrice }}
                              </q-td>
                              <q-td key="fileName" :props="props" style="border-right:1px solid #ccc">
                                 <a href="javascript:;" class="text-primary" @click="downloadFile(item.fileId)">{{ item.fileName }}</a>
                              </q-td>
                            </div>
                          </q-tr>
                        </template>
    
    1. table表头样式如下

    多级表头

    展开全文
  • Element UI动态生成多级表头 思路:使用事先定义好的表头数据结构,使用Vue组件中的render函数动态渲染 查看全部源码 1、表头数据结构 可以看出,下面的数据结构可以描述多级表头的包含关系,其中name表示列的...
  • 前端导出多级表头

    2020-07-29 16:18:03
    原文链接:...最近项目里有这么一个需求,把一个多级表头的table导出为excel格式。然后在网上找到一篇文章:js-xlsx导出自定义合并列头实现思路,我按照他的教程操作之后发现比较繁琐,这篇
  • EasyUI DataGrid 多级表头设置

    万次阅读 2016-02-28 20:59:25
    使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true, fitColumns : false, columns: [ [ {"title":
  • 效果1如图: ...js代码如下: //初始化所有grid function initAllGrid(){ var colModel = [{label:'省(区、市)',name:'provice',index:'provice', width:90,align:"center",frozen:true, ...
  • element 表格table纵横双列表头 斜线样式处理和多级表头循环 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href=...
  • 使用js-xlsx插件导出多级表头excel 参考文章是在vue中使用的,不过按照原文的方法实际上是运行不起来的,会报错,错误如下: 点xlsx第2965行发现错误如下: 经过查找发现在项目目结构中的 /node_module/xlsx ...
  •   记录下使用layUI多级表头时犯的一个错误,其实主要原因是我多写了一个逗号 “ , ” 导致报错的,我的表格只有2级表头,在第二级时多写了一个逗号 错误提示: layui.all.js?v=1.1.1:179 Laytpl Error:TypeError:...
  • 主要介绍了vue+render+jsx实现可编辑动态多级表头table的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的工作或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • iview自定义实现多级表头

    千次阅读 2018-03-01 13:33:00
    注意:最新版iview已经提供多级表头功能 参考 原理:利用多个Table组件通过显示和隐藏thead和tbody来拼接表格(较粗暴) html <div style="margin: 50px"> <Table class="ud-table-no-body" :columns=...
  • vue+elementui table表格递归生成多级表头前言1.tableView.vue2.tableItem.vue(子组件)3.columnItem.vue(递归组件)如图所示 前言 近期在写一个后台管理系统的项目,需要表格动态生成多级表头,项目中使用了递归组件,...
  • Ext有个GridToExcel.js工具,但是没有对多级表头进行处理。 类似下个这个表格: 导出效果为: 贴上代码: 主要是对gridToExcel.js进行修改,但是有点不够通用,因为可能我没有考虑很多情况,大家可以...
  • import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'...element-ui/lib/theme-chalk/index.css'...
  • 在项目中使用el-table,是一个多级表头table,有一个需求需要新开一列添加一个类似于在表格中加Checkbox的一列,我在最外层el-table-column,并排加一列,发现table-body中都可以加上,表头无法添加上。 解决方案:...
  • 常规设置多级表头如下: var gridHeaderArr = [];//需要设置的表头 $.each(data.mutiModel, function (index, item) { gridHeaderArr.push({ startColumnName: item.FIELD, numberOfColumns: 1, titleText:
  • 但是多级表头取数据时就有问题会把标题和一级表头二级表头当做一条数据,从而导致表头和数据对不上。所以我想用xlsx插件指定导入的区域,但我修改!ref后取值一直为空。所以我该怎么修改,你们做多表头excel导入时...
  • ElementUI-多级表头

    2018-01-15 09:22:00
    <script src="../js/vue.js"> <script src="../plugins/elementUI/elementUI.js"> var demo = new Vue({ el: '#demo', data: { tableData3: [{ date: '2016-05-03', name: '王小虎', province: '上海', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,197
精华内容 478
关键字:

js多级表头