vue移动端复杂表格表头，固定表头与固定第一列__vue固定表头和第一列

相关文章推荐
帅气的牛肉面 · QTextEdit设置背景色_textedi ...· 3 月前 ·
乐观的青蛙 · Audio/Video ...· 1 月前 ·
读研的面包 · QT中怎么将选项栏居中摆放 - CSDN文库· 5 月前 ·
爱笑的葫芦 · Sqlserver存储过程如何写循环-腾讯云 ...· 7 月前 ·
坏坏的羽毛球 · nestjs ...· 1 年前 ·
好帅的匕首 · 怎样消除回车符号-掘金· 1 年前 ·
从容的镜子 · 从 Apache Doris 到 ...· 1 年前 ·
vue移动端复杂表格表头，固定表头与固定第一列_vue
#前言
最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些例子，在此做一了一个完整的vue版的例子。
#效果
无图无真相，先上最终效果图再说。
vue移动端复杂表格表头，固定表头与固定第一列_移动端_02
#方法一：iscroll 插件版
###第一步：npm install
引入 iscroll
npm i iscroll --save 
###第二步：封装
对插件再做一层封装，封装成 iscrollTable.js 方便调用，代码如下：
// 统一使用
const iScollProbe = require('iscroll/build/iscroll-probe');
let scroller = null;
let Selector = "";
export function createIScroller(selector) {
  Selector = selector;
  scroller = new iScollProbe(Selector, {
    preventDefault: false,  // 阻止浏览器滑动默认行为
    probeType: 3, //需要使用 iscroll-probe.js 才能生效 probeType ： 1 滚动不繁忙的时候触发 probeType ： 2 滚动时每隔一定时间触发 probeType ： 3   每滚动一像素触发一次
    mouseWheel: true, //是否监听鼠标滚轮事件。
    scrollX: true,  // 启动x轴滑动
    scrollY: true,  // 启动y轴滑动
    // momentum: false,
    lockDirection: false,
    snap: false, //自动分割容器，用于制作走马灯效果等。Options.snap:true// 根据容器尺寸自动分割
    //snapSpeed: 400,
    scrollbars: false, //是否显示默认滚动条
    freeScroll: true, //主要在上下左右滚动都生效时使用，可以向任意方向滚动。
    deceleration: 0.0001, //滚动动量减速越大越快，建议不大于 0.01,默认:0.0006
    disableMouse: true, //是否关闭鼠标事件探测。如知道运行在哪个平台，可以开启它来加速。
    disablePointer: true, //是否关闭指针事件探测。如知道运行在哪个平台，可以开启它来加速。
    disableTouch: false, //是否关闭触摸事件探测。如知道运行在哪个平台，可以开启它来加速。
    eventPassthrough: false, //使用 IScroll 的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。
    bounce: false //是否启用弹力动画效果，关掉可以加速
  scroller.on('scroll', updatePosition);
  scroller.on('scrollEnd', updatePosition);
  scroller.on('beforeScrollStart', function () {
    scroller.refresh();
  function updatePosition() {
    let frozenCols = document.querySelectorAll(selector + ' table tr td.cols');
    let frozenRows = document.querySelectorAll(selector + ' table tr th.rows');
    let frozenCrosses = document.querySelectorAll(selector + ' table tr th.cross');
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = 'translate(' + -1 * this.x + 'px, 0px) translateZ(0px)';
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = 'translate(0px, ' + -1 * this.y + 'px) translateZ(0px)';
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = 'translate(' + -1 * this.x + 'px,' + -1 * this.y + 'px) translateZ(0px)';
  return scroller;
export function refreshScroller() {
  if (scroller === null) {
    console.error("先初始化scroller");
    return;
  setTimeout(() => {
    scroller.refresh();
    scroller.scrollTo(0, 0);
    let frozenCols = document.querySelectorAll(Selector + ' table tr td.cols');
    let frozenRows = document.querySelectorAll(Selector + ' table tr th.rows');
    let frozenCrosses = document.querySelectorAll(Selector + ' table tr th.cross');
    for (let i = 0; i < frozenCols.length; i++) {
      frozenCols[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
    for (let i = 0; i < frozenRows.length; i++) {
      frozenRows[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
    for (let i = 0; i < frozenCrosses.length; i++) {
      frozenCrosses[i].style.transform = 'translate(0px, 0px) translateZ(0px)';
  }, 0);
###第三步：使用
引用前面的自己封装的iscrollTable.js，用到的table.vue的具体代码如下：
<template>
    <div class="pages-tables " id="pages-tables">
        <div class="waterMask" id="watermark"></div>
        <div class="rolling-table meal-table" ref="tableBox" :style="{height: maxHeight + 'px'}">
            <table class="table" id="table" cellpadding="0" cellspacing="0" ref="rollingTable">
                <tr v-for="(x,i) in xList" :key="i">
                    <th class="rows " :class="{'cross': index == 0 && i == 0}" v-for="(l,index) in x" :key="index" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
                <tr v-for="(l,i) in yList" :key="i + 'a'">
                    <template v-for="(x, xKey) in xField">
                        <td v-for="(ll,yKey) in l" :key="yKey" v-if="x === yKey" :class="{'cols': yKey == xField[0]}">
                            {{ yList[i][yKey]}}
                    </template>
                <tr></tr>
            </table>
</template>
<script>
import { createIScroller, refreshScroller } from "libs/iscrollTable";
import { addWaterMarker } from "libs/common/common";
export default {
    data() {
        return {
            maxHeight:'100%',
            scroll: {
                scroller: null
            xList: [
                        field_name: "statis_date",
                        name: "第一行合并3行1列",
                        colspan: 1, //指定单元格 横向 跨越的 列数
                        rowspan: 3, //指定单元格 纵向 跨越的 行数
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第一行合并3列",
                        colspan: 3,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期",
                        colspan: 1, //指定单元格 横向 跨越的 列数
                        rowspan: 1, //指定单元格 纵向 跨越的 行数
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期合并3列",
                        colspan: 3,
                        rowspan: 1,
                        field_name: "area_name",
                        name: "第三行当月新增",
                        colspan: 1,  //指定单元格 横向 跨越的 列数
                        rowspan: 1, //指定单元格 纵向 跨越的 行数
                        field_name: "area_name1",
                        name: "第三行当月新增1",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name2",
                        name: "第三行当月新增2",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name3",
                        name: "第三行当月新增3",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name4",
                        name: "第三行当月新增4",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name5",
                        name: "第三行当月新增5",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name6",
                        name: "第三行当月新增6",
                        colspan: 1,
                        rowspan: 1,
            xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6",],
            yList: [
                    area_name: "新增数据开始",
                    area_name1: "新增数据开始1",
                    area_name2: "新增数据开始2",
                    area_name3: "新增数据开始3",
                    area_name4: "新增数据开始4",
                    area_name5: "新增数据开始5",
                    area_name6: "新增数据开始6",
                    statis_date: 100007,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据最后",
                    area_name1: "新增数据最后1",
                    area_name2: "新增数据最后2",
                    area_name3: "新增数据最后3",
                    area_name4: "新增数据最后4",
                    area_name5: "新增数据最后5",
                    area_name6: "新增数据最后6",
                    statis_date: 222222,
    mounted() {
        this.maxHeight = window.screen.height
        this.scroll.scroller = createIScroller(".meal-table");
        // addWaterMarker(document.getElementById('watermark'))
</script>
<style lang="less" scoped>
.pages-tables {
  -webkit-overflow-scrolling: touch; // ios滑动顺畅
  position: relative;
.rolling-table {
    height: 100%;
    font-size: 0.28rem;
    color: #86939a;
    background-color: #fff;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    position: relative;
    top: 0;
    overflow: hidden;
.rows {
    position: relative;
    z-index: 3;
.cross {
    position: relative;
    z-index: 5;
table td {
  border: 0px solid #000;
  font-size: 0.32rem;
  background: #fff;
::-webkit-scrollbar {
    display: none;
.table {
//   border-collapse: collapse; //去掉重复的border
  color: #86939e;
  font-size: 0.32rem;
  border: 0px solid #000;
  min-height: 100%;
  text-align: center;
    border-bottom: 0.02rem solid #eee;
    white-space: nowrap;
    height: 0.86rem;
    line-height: 0.86rem;
    padding: 0 0.2rem;
    color: #43484d;
    white-space: nowrap;
    height: 0.74rem;
    line-height: 0.74rem;
    padding: 0rem 0.3rem;
    background-color: #f3f4f6;
    font-weight: normal;
    padding-bottom: 0;
    padding-top: 0;
    border: 0.02rem solid red;
    position: relative;
    background-color: #fff;
    &:nth-of-type(odd){
            // background-color: pink;
</style>
table 外的盒子 .rolling-table 要设置高度，不然向上滚动失效
2.固定和行与列，即：rows、cross 的position要设为relative
最终效果就如上图。
#方法二： 结合css，自定义封装版
###原理
因为除了表头和第一列，其他都可以滚动所以需要：
1.一个展示的table表格
2.一个用来覆盖上表头的 thead，一个用来覆盖左上角的 div，一个固定在第一列的 tbody。
3. 展示的table表格放在最底层，覆盖上表头的 thead固定定位在最上面，固定在第一列的 tbody固定定位在最左边，左上角的 div固定是左上角且z-index最大，在最上层。
4. 固定的表格头部与第一列的宽、高、行高都是通过获取真实的表格的宽高来设定的。
5. 通过展示的table表格的上下滚动从而带动固定在第一列的 tbody向上滚动，向左右滚动带动覆盖上表头的 thead的左右滚动。
完整代码如下：
<template>
    <div class="pages" id="pages" :style="{height: maxHeight + 'px'}">
        <table id="table" class="table" cellpadding="0" cellspacing="0">
            <thead v-show="showFixedHeaderCloFirst" class="fixedThead" id="fixedThead" :style="{left: fixedTheadLeft}">
                <tr v-for="(x,i) in xList"   :key="i+'a'">
                    <th v-for="(l,i) in x" :key="i" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
            </thead>
            <div v-show="showFixedHeaderCloFirst" class="fixedHeaderCenter" id="fixedHeaderCenter" :style="{'line-height': firstCloHeight + 'px',width: firstCloWidth-1 + 'px'}">{{xList[0][0].name}}</div>
            <tbody v-show="showFixedHeaderCloFirst" class="fixedHeaderCloFirst" id="fixedHeaderCloFirst" :style="{'top': fixedHeaderCloFirstTop ,'height': fixedHeaderCloFirstHeight}">
                <tr v-for="(l,i) in yList" :key="i" :style="{width: firstCloWidth + 'px',height: cloFirstLineHeight + 'px'}">
                    <td :style="{width: firstCloWidth + 'px',height: cloFirstLineHeight -1 + 'px' }">{{l.statis_date }} </td>
            </tbody>
            <thead >
                <tr v-for="(x,index) in xList"   :key="index+'b'">
                    <th :class="{firstCol: index == 0 && i == 0}" v-for="(l,i) in x" :key="i" :colspan="l.colspan" :rowspan="l.rowspan">{{l.name}}</th>
            </thead>
            <tbody id="tbody">
                <tr  v-for="(l,i) in yList" :key="i">
                    <td v-for="(x,xKey) in xField" :key="xKey">
                        <div v-for="(ll,yKey) in l" v-if="x === yKey" :key="yKey" :class="{'tables-content-item-yellow':yList[i][yKey] > 0 && validateVal(x),'tables-content-item-green':yList[i][yKey] <= 0 && validateVal(x),}">
                            {{ yList[i][yKey]}}
            </tbody>
        </table>
</template>
<script>
export default {
    data() {
        return {
            maxHeight: '100%',
            fixedTheadLeft: 0,
            fixedHeaderCloFirstTop: 0,
            fixedHeaderCloFirstHeight: '100%',
            th: [],
            tl: [],
            temp: [],
            firstCloWidth: 0,
            firstCloHeight: 0,
            showFixedHeaderCloFirst: false,
            cloFirstLineHeight: '0',
            fixedCol: false,
            fixedHeader: false,
            fixedA1: false,
            hLeft: 0,
            hHeight: 0,
            xList: [
                        field_name: "statis_date",
                        name: "第一行合并3行1列",
                        colspan: 1, //指定单元格 横向 跨越的 列数
                        rowspan: 3, //指定单元格 纵向 跨越的 行数
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第一行合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第一行合并3列",
                        colspan: 3,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期",
                        colspan: 1, //指定单元格 横向 跨越的 列数
                        rowspan: 1, //指定单元格 纵向 跨越的 行数
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期合并2列",
                        colspan: 2,
                        rowspan: 1,
                        field_name: "custom_field",
                        name: "第二行日期合并3列",
                        colspan: 3,
                        rowspan: 1,
                        field_name: "area_name",
                        name: "第三行当月新增",
                        colspan: 1,  //指定单元格 横向 跨越的 列数
                        rowspan: 1, //指定单元格 纵向 跨越的 行数
                        field_name: "area_name1",
                        name: "第三行当月新增1",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name2",
                        name: "第三行当月新增2",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name3",
                        name: "第三行当月新增3",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name4",
                        name: "第三行当月新增4",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name5",
                        name: "第三行当月新增5",
                        colspan: 1,
                        rowspan: 1,
                        field_name: "area_name6",
                        name: "第三行当月新增6",
                        colspan: 1,
                        rowspan: 1,
            xField: ['statis_date', 'area_name', "area_name1", "area_name2", "area_name3", "area_name4", "area_name5", "area_name6",],
            yList: [
                    area_name: "新增数据开始",
                    area_name1: "新增数据开始1",
                    area_name2: "新增数据开始2",
                    area_name3: "新增数据开始3",
                    area_name4: "新增数据开始4",
                    area_name5: "新增数据开始5",
                    area_name6: "新增数据开始6",
                    statis_date: 100007,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据",
                    area_name1: "新增数据1",
                    area_name2: "新增数据2",
                    area_name3: "新增数据3",
                    area_name4: "新增数据4",
                    area_name5: "新增数据5",
                    area_name6: "新增数据6",
                    statis_date: 201807,
                    area_name: "新增数据最后",
                    area_name1: "新增数据最后1",
                    area_name2: "新增数据最后2",
                    area_name3: "新增数据最后3",
                    area_name4: "新增数据最后4",
                    area_name5: "新增数据最后5",
                    area_name6: "新增数据最后6",
                    statis_date: 222222,
    filters: {
        dateFromt: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.slice(4)
    methods: {
        // 返回
        vdVal(val, value) {
            return value
        // 是否包含 % 标志，有就要颜色控制
        validateVal(value) {
            let flag = false
            this.xList.forEach((e, i) => {
                if (e.zd_name == value) {
                    if (e.zx_name.includes('%')) {
                        flag = true
            return flag
        $$(dom){
            return document.getElementById(dom)
        savePosition(){
            this.maxHeight = window.screen.height
            this.$$("pages").onscroll = (()=> {
                let offsetHeight = this.$$("fixedHeaderCenter").offsetHeight
                let scrollTop = offsetHeight + 1 - this.$$("pages").scrollTop
                this.fixedTheadLeft =  - this.$$("pages").scrollLeft + 'px'
                this.fixedHeaderCloFirstTop = scrollTop + 'px'
                console.log("scrollTop:",scrollTop)
                console.log("this.fixedHeaderCloFirstTop:",this.fixedHeaderCloFirstTop)
            // this.$$("fixedHeaderCloFirst").onscroll = (()=> {
            //     let offsetHeight = this.$$("fixedHeaderCenter").offsetHeight
            //     let scrollTop = - this.$$("fixedHeaderCloFirst").scrollTop
            //     this.$$("pages").style.left =  - this.$$("fixedHeaderCloFirst").scrollLeft + 'px'
            //     this.$$("table").style.top =  scrollTop + 'px'
            // });
    mounted() {
        setTimeout(()=>{
            this.firstCloWidth = document.getElementsByClassName("firstCol")[0].offsetWidth 
            this.firstCloHeight = document.getElementsByClassName("firstCol")[0].offsetHeight-1
            this.fixedHeaderCloFirstHeight = this.$$("tbody").offsetHeight + 'px'
            this.cloFirstLineHeight = this.$$("tbody").children[0].offsetHeight  + 'px'
            this.fixedHeaderCloFirstTop = this.firstCloHeight + 3 + 'px'
            this.showFixedHeaderCloFirst = true
            this.savePosition()
        },1000)
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
    display: none;
.pages{
    overflow: scroll;
    height: 100%;
.fixedHeaderCenter{
    border: 1px solid red;
    background-color: #f3f4f6;
    color: #43484d;
    text-align: center;
    // padding: 0 0.3rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
.fixedHeaderCloFirst{
    // border-bottom: 1px solid #eee;
    height: 100%;
    line-height: 0.86rem;
    background: #fff;
    white-space: nowrap;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    th,td{
        padding: 0;
    // overflow: scroll;
        background-color: #fff;
        border-bottom: 1px solid #eee;
@main-color-green: #269513;
@main-color-yellow: #fc9d2e;
table {
  position: relative;
  color: #86939e;
  font-size: 0.32rem;
  border: 0px solid #000;
  min-height: 100%;
  text-align: center;
  white-space:nowrap;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    height: 0.86rem;
    line-height: 0.86rem;
    padding: 0 0.2rem;
    white-space:nowrap;
      white-space:nowrap;
    color: #43484d;
    white-space: nowrap;
    height: 0.74rem;
    line-height: 0.74rem;
    padding: 0rem 0.3rem;
    background-color: #f3f4f6;
    font-weight: normal;
    padding-bottom: 0;
    padding-top: 0;
    border: 1px solid red;
.tables-content-item-green {
  color: @main-color-green;
.tables-content-item-yellow {
  color: @main-color-yellow;
table {
    font-size: 0.3rem;
    // margin: 300px;
    border-collapse:collapse
.fixedThead{
    background: lightblue;
    position: fixed;
    top: 0 ;
    z-index: 2;
/*固定表头的样式*/
.fixedHeader {
    background: lightblue;
    position: fixed;
    top: 0 ;
    z-index: 2;
</style>
最终效果图如下：

不过这个版本的上下滚动时的精准计算有点误差。
####推荐第一种方式。
#最后
希望文章内容对你有一点帮助！
欢迎关注以下公众号，学到不一样的 武功秘籍 ！
关注公众号并回复 福利 可领取免费学习资料
                            hive json 数据 hive导入json数据
                             hive官方并不支持json格式的数据加载，默认支持csv格式文件加载，如何在不依赖外部jar包的情况下实现json数据格式解析，本编博客着重介绍此问题解决方案首先创建元数据表：create EXTERNAL table access_log (content string) 
row format delimited fields terminated by '\t' 
STORED AS IN
                            json转对象 java json转对象的方法
                             首先，创建一个对象： Article article = new Article();下面两种方式展示json字符串与对象的转换：使用fastjson，转换如下：// 将对象转成json格式的字符串
 String jsonStr = JSON.toJSON(article).toString();
 // 将json格式的字符串转成对象
 Article article = JSON.parse
        [spark] [XML] [scala]
    一、要求将XML中的account_number、model数据提取出来，并以account_number：model格式存储1、XML文件数据格式<activations>
　　<activation timestamp="1225499258" type="phone">
                            Python json去除反斜杠 python删除json某个内容
                             需求： 最近有个需求，需求对目录下的一个json数据进行处理，主要对json里面的title如果为空字符串，将此文件进行删除，如果文件夹为空，也就行递归的查找和删除。直接上我的代码，需要自己拿去，O(∩_∩)O哈哈~import json
	import os
	def remove_none_dirs(path):
	    # 去重空文件夹
	    list = os.listdir(p