移动端的h5可配置表头的复杂表格

已于 2023-06-14 11:37:13 修改
阅读量961 收藏 1
点赞数
文章标签： 前端 javascript html5
于 2023-06-14 11:33:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Javahtml12/article/details/131204310
版权

最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些例子，在此做一了一个完整的vue版的例子

效果图

 1.引入 iscroll

npm i iscroll --save

 2.对插件再做一层封装，封装成 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);
}

3.引用前面的自己封装的iscrollTable.js，用到的table.vue的具体代码如下：

<template>
    <div class="pages-tables " id="pages-tables">
        <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>
                <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]}}
                        </td>
                    </template>
                </tr>
                <tr></tr>
            </table>
<van-empty class="empty" v-if="yList.length==0" description="暂无数据" />
            <div :class="[arrow=='left'?'arrows-body-left':'', 'arrows-body']" v-if="yList.length>0">
              <div class="arrow"></div>
              <div class="arrow"></div>
              <div class="arrow"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { createIScroller,refreshScroller,destroyScroller } from "libs/iscrollTable";
export default {
    data() {
        return {
            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,
                }
            ]
        }
    },
    beforeDestroy() {
      destroyScroller();
    },
    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;
  td {
    border-bottom: 0.02rem solid #eee;
    white-space: nowrap;
    height: 0.86rem;
    line-height: 0.86rem;
    padding: 0 0.2rem;
  }
  th {
    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;
  }
}
tr{
    position: relative;
    background-color: #fff;
    &:nth-of-type(odd){
        td{
            // background-color: pink;
        }
    }
}

.arrows-body{
  position: absolute;
  top: 50%;
  right: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-90deg);
  .arrow {
  position: absolute;
  width: 10px;
  height: 2px;
  opacity: 0;
  transform: scale(0.3);
  animation: move-arrow 3s ease-out infinite;
}
.arrow:first-child {
  animation: move-arrow 3s ease-out 1s infinite;
}
.arrow:nth-child(2) {
  animation: move-arrow 3s ease-out 2s infinite;
}
.arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  transform: roate(45deg);
  top: 0;
  height: 100%;
  width: 50%;
  background: #d21;
}
.arrow:before {
  left: 0;
  transform: skewY(45deg);
}
.arrow:after {
  right: 0;
  width: 50%;
  transform: skewY(-45deg);
}
.arrow-up:before {
  left: 0;
  transform: skewY(320deg);
}
.arrow-up:after {
  right: 0;
  width: 50%;
  transform: skewY(-320deg);
}
}
.arrows-body-left{
  right: 0%;
  transform: rotate(90deg);
}
@keyframes move-arrow {
  25% {
    opacity: 1;
  }

  33.3% {
    opacity: 1;
    transform: translateY(10px);
  }

  66.6% {
    opacity: 1;
    transform: translateY(18px);
  }

  100% {
    opacity: 0;
    transform: translateY(26px) scale(0.5);
  }
}
</style>

4.ios滑动可能会有回弹问题

// 移除ios回弹
      removeIosFlex() {
        if(isiOS){
        document.addEventListener('touchmove', function(event) {
          let mainContentEle = document.querySelector('.pageInfo') // 你当前的页面总元素
          const path = event.path || (event.composedPath && event.composedPath())
          if (!mainContentEle) {
            mainContentEle = document.querySelector('.pageInfo')
          }
          if (path && Array.isArray(path) && path.includes(mainContentEle)) {
            event.preventDefault();
          }
        }, { passive: false })
      }
      }

长夜于火
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端H5商城模板源码-34个页面
09-07
基于原生HTML+JS开发的商城类移动端H5应用模板，内含主页、分类页、购物车、个人中心四大导航，还有支付相关功能，共包含30余个界面。
移动端html页面显示图表,HTML5移动端数据图表组件调研
weixin_29746595的博客
06-03 1294
1.charts.js技术：基于HTML5 canvas类型：6种图表类型(折线图，条形图，雷达图，饼图，柱状图和极地区域区)量级：独立包，不依赖第三方 JavaScript 库，小于 5KB大小：Chart.min.js-50.201 kb特性：颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫兼容：支持canvas的所有现代浏览器和大部分手机浏览器，自动针对retina屏幕...
h5页面编写原生table表格，并调整表格样式？
SM_Cute的博客
07-06 955
h5页面编写原生table表格，并调整表格样式？
实现Vue中使用递归组件动态渲染多级表头的表格
最新发布
heiyihahei的博客
03-10 1209
在前端开发中，特别是在数据展示场景下，我们经常会遇到需要处理复杂嵌套结构的数据，并将其以表格形式展现的情况。以下是一个使用Vue 3 + TS 和Element UI实现的动态生成嵌套表头的例子，通过一个名为RecursiveTableHeader的递归组件来根据后端返回的结构化数据自动生成多级表头。帮助大家优雅的生成多级表头。
移动端H5上下滑屏翻页demo
03-27
移动端H5上下滑屏翻页demo，本人已做优化，直接在分页内添加内容，就可以看到每页翻页的内容，自适应屏幕大小，直接可上项目
非常好用的H5选人组件
02-27
H5选人组件 可多选
HTML5表格介绍以及基本应用
L20220927Y的博客
10-26 2209
可以的话，麻烦关注一下，互相关注噢
html5 列表/表格标签
weixin_49346755的博客
09-30 1014
HTML的列表主要有三种，一种是无序列表，一种是有序列表，还有一种是说明列表。无序列表用标签来定义，有序列表用标签来定义，说明列表用标签来定义。对于无序列表和有序列表，用标签来定义列表中项目；对于说明列表，用标签来定义列表项目，用标签来定义项目的说明。HTML中的表格用标签来定义。一个 HTML 表格包括一个 标签，一个或多个、 以及 标签。
vue3开发，mobile-table 适用于移动端表格
Taoqun的专栏
04-17 5009
【代码】vue3开发，mobile-table 适用于移动端表格。
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】
热门推荐
seeeeeeeeeee的博客
03-02 1万+
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能
HTML5简明教程系列之HTML5 表格与表单（二）
Bobowen的博客
11-15 1931
HTML的第二弹也来了，最近高产似母猪，状态也不错，代码来源为实验课。本期主要内容为：HTML表格与DIV应用、HTML表单。
移动端H5页面控制台打印信息：vconsole
06-01
引入vconsole.min.js后，在页面使用let vConsole = new VConsole()初始化，然后就可以直接使用console.log查看了
h5移动端仿钉钉组织架构的选择部门功能
12-02
博客地址https://blog.csdn.net/weixin_44484452/article/details/121638096?spm=1001.2014.3001.5501 本资源比博客的补充了顶部面包屑功能
移动端H5前端设计项目源码
04-08
移动端H5前端设计项目源码
uniapp的移动端h5的横屏电子签名
06-01
由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行
h5移动端部门树展示
04-13
h5移动端树列表
rem移动端h5自适应工具pixelRem.js
09-07
超简单使用方法：import导入默认tool对象；tool.remDefault模式下750设计稿手机全屏CSS设置为750/1000=0.75rem；tool.remHalf模式下为750/100/2=3.75rem；
移动端H5实现搜索框样式源码
04-16
我的博客《移动端H5实现搜索框样式》源码，欢迎批评指教 博客地址：https://blog.csdn.net/chengbao315/article/details/105549541
react-mobile:基于react的移动端H5框架
05-08
基于react + webpack 的单页面移动端应用,不依靠create-react-app脚手架 项目结构 |-- build webpack配置文件夹 |-- utils.js 所用方法 |-- webpack.config.js 公共配置 |-- webpack.dev.js 开发配置 |-- ...
vant 移动端h5table表格固定列
01-17
vant是一个基于Vue.js的移动端UI组件库，提供了丰富的组件和功能，可以快速开发移动端H5页面。在vant中，如果需要固定表格列，可以通过设置表格的scrollable属性来实现。 首先，在使用vant中的H5表格时，需要引入VanTable组件，并设置表格的数据和列的配置。然后，在VanTable组件中设置scrollable属性为true，这样就可以启用表格的滚动功能。接下来，可以通过设置fixed属性来固定需要的列，例如设置fixed为'left'可以固定左侧的列，设置fixed为'right'可以固定右侧的列。 在H5页面中使用vant的table组件时，可以根据实际需求，选择需要固定的列，并通过设置scrollable和fixed属性来实现固定列功能。这样就可以在移动端H5页面中实现固定表格列的效果，提升用户体验，使页面更加友好和易用。 通过vant移动端H5表格固定列功能，可以实现更加灵活和便捷的表格展示方式，满足移动端数据展示和交互的需求。这样就可以为移动端用户提供更加优秀的用户体验，增强用户对H5页面的满意度和使用欲望。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值