通用表格:可折叠,可合并,多列折行显示,自定义固定头,自定义固定列,移动端,vue

最新推荐文章于 2024-06-21 11:16:10 发布
最新推荐文章于 2024-06-21 11:16:10 发布
阅读量2.7k 收藏 7
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36084681/article/details/91044443
版权

一 基本用法:

js模板:

 <script>
        var genbody = `
            <table>
             <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                 <tbody v-for="(data,index) in tableData">
                 <tr>
                     <td>
                         {{index+1}}
                     </td>
                     <td>
                         {{data.RealName}}
                     </td>
                     <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                 </tr>
                 </tbody>
              </table>
`
        var genhead = `
         <table>
                <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                <tbody>
                <tr>
                    <td >
                        序号
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                    <td>
                        状态
                    </td>
                </tr>
                </tbody>
            </table>

        `;
    </script>

css样式:

 <style>
        table{
            width:385px;
        }
        tr {
            height:40px;
        }

        td {
            border: 1px solid #ebeef5;
            word-break: break-all;
            text-align: center;
            padding: 0px;
            vertical-align: middle;
        }
</style>

html组件:

<body>
            <my-head>
                <gen-head ></gen-head>
            </my-head>
            <my-body>
                <gen-body :table-data="UserArr" ></gen-body>
            </my-body>
</body>

js函数:

无

效果:

五列数据,不可折叠,不可左右滑动,无固定行,无固定列,就是一个基本表格,想要什么样式在js模板或者写css

 二:单行合并单元格

js模板:

 <script>
        var genbody = `
            <table>
             <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                 <tbody v-for="(data,index) in tableData" :class="{on:index%2==0,off:index%2!=0}">
                 <tr>
                     <td colspan="2">
                         {{index+1}}
                     </td>
                     <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                 </tr>
                 </tbody>
              </table>
`
        var genhead = `
         <table>
                <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                <tbody>
                <tr>
                    <td colspan="2">
                        序号
                    </td>
                    <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                    <td>
                        状态
                    </td>
                </tr>
                </tbody>
            </table>

        `;
    </script>

css样式:

 <style>
        table{
            width:385px;
        }
        tr {
            height:40px;
        }

        td {
            border: 1px solid #ebeef5;
            word-break: break-all;
            text-align: center;
            padding: 0px;
            vertical-align: middle;
        }

        .on {
            background: #F5F7FA;
        }

        .off {
            background: white;
        }
</style>

其他不变.

效果:

:

 三:多行,合并,隔行换色

js模板:

<script>
        var genbody = `
            <table>
             <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                 <tbody v-for="(data,index) in tableData">
                 <tr>
                     <td rowspan="2">
                         {{index+1}}
                     </td>

                     <td colspan="2">
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.RealName}}
                     </td>
                 </tr>
                 <tr>
                     <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                 </tr>
                 </tbody>
              </table>
`
        var genhead = `
         <table>
                <colgroup>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                    <col width="20%"></col>
                </colgroup>
                <tbody>
                <tr>
                    <td rowspan="2">
                        序号
                    </td>
                    <td colspan="2">
                        用户名
                    </td>
                    <td >
                        姓名
                    </td>
                </tr>
                 <tr>
                    <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                     <td >
                        状态
                    </td>
                </tr>
                </tbody>
            </table>

        `;
    </script>

其他不变:

效果:

四:三的基础上加上可展开折叠效果

js模板:

 <script>
        var genbody = `
            <table>
             <colgroup>
                    <col width="25%"></col>
                    <col width="25%"></col>
                    <col width="25%"></col>
                    <col width="25%"></col>
                </colgroup>
                 <tbody v-for="(data,index) in tableData" :class="{on:index%2==0,off:index%2!=0}" @click="$emit('bodys',index)">
                 <tr>
                     <td rowspan="2">
                         {{index+1}}
                     </td>

                     <td colspan="2">
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.RealName}}
                     </td>
                 </tr>
                 <tr v-show="store.Current == index">
                     <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                 </tr>
                 </tbody>
              </table>
`
        var genhead = `
         <table>
                <colgroup>
                    <col width="25%"></col>
                    <col width="25%"></col>
                    <col width="25%"></col>
                    <col width="25%"></col>
                </colgroup>
                <tbody @click="$emit('heads')">
                <tr>
                    <td rowspan="2">
                        序号
                    </td>
                    <td colspan="2">
                        用户名
                    </td>
                    <td >
                        姓名
                    </td>
                </tr>
                 <tr v-show="head">
                    <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                     <td >
                        状态
                    </td>
                </tr>
                </tbody>
            </table>

        `;
    </script>

css样式:不变

html组件:

           <my-head>
                <gen-head @heads="heads" :head="head" ></gen-head>
            </my-head>
            <my-body>
                <gen-body :table-data="UserArr" @bodys="bodys"></gen-body>
            </my-body>

vue中的store(即vue中的data属性):

 var store = {
        Current: null,
        body: false,
        head: false,
...
}

vue中的methods(自定义点击事件的方法):

 methods: {

            bodys: function (index) {
                if (store.Current == index) {
                    store.Current = null;
                } else {
                    store.Current = index;
                }
            },
            heads: function () {
                if (store.head == true) {
                    store.head = false;
                } else {
                    store.head = true;
                }
            },
...
}

效果:

 五:四的基础上可左右滚定,

js模板:

 <script>
        var genbody = `
            <table>
             <colgroup>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                </colgroup>
                 <tbody v-for="(data,index) in tableData" :class="{on:index%2==0,off:index%2!=0}" @click="$emit('bodys',index)">
                 <tr>
                     <td rowspan="2">
                         {{index+1}}
                     </td>

                     <td colspan="2">
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.RealName}}
                     </td>
                      <td rowspan="2">
                         {{index+1}}
                     </td>

                     <td colspan="2">
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.RealName}}
                     </td>
                 </tr>
                 <tr v-show="store.Current == index">
                     <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                       <td>
                         {{data.Username}}
                     </td>
                     <td>
                         {{data.UnitName}}
                     </td>
                     <td>
                         {{data.StateStr}}
                     </td>
                 </tr>
                 </tbody>
              </table>
`
        var genhead = `
         <table>
                <colgroup>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                    <col width="12.5%"></col>
                </colgroup>
                <tbody @click="$emit('heads')">
                <tr>
                    <td rowspan="2">
                        序号
                    </td>
                    <td colspan="2">
                        用户名
                    </td>
                    <td >
                        姓名
                    </td>
                        <td rowspan="2">
                        序号
                    </td>
                    <td colspan="2">
                        用户名
                    </td>
                    <td >
                        姓名
                    </td>
                </tr>
                 <tr v-show="head">
                    <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                     <td >
                        状态
                    </td>
                      <td>
                        用户名
                    </td>
                    <td>
                        部门名称
                    </td>
                     <td >
                        状态
                    </td>
                </tr>
                </tbody>
            </table>

        `;
    </script>

css样式:

<style>
        table{
            width:750px;
        }
        .body {
            width:375px;
            overflow: scroll;
        }
        .header {
            width:375px;
            overflow: scroll;
        }
        tr {
            height:40px;
        }

        td {
            border: 1px solid #ebeef5;
            word-break: break-all;
            text-align: center;
            padding: 0px;
            vertical-align: middle;
        }

        .on {
            background: #F5F7FA;
        }

        .off {
            background: white;
        }
</style>

html组件:上一个的基础上不变

js(vue data不变):

js(vue methods不变):

vue之后加一个jquery函数(用于表头表体联动):

$(function () {
        $('.body').on('scroll', function () {
            let left = $(this).scrollLeft();
            $('.header').scrollLeft(left);
        });
    });

效果:

 

六:固定第一列:

js模板:跟之前的一样

html组件:

           <my-fix>
                <template slot="fixhead">
                    <gen-head @heads="heads" :head="head"></gen-head>
                </template>
                <gen-body :table-data="UserArr" @bodys="bodys"></gen-body>
            </my-fix>
            <my-head>
                <gen-head @heads="heads" :head="head" ></gen-head>
            </my-head>
            <my-body>
                <gen-body :table-data="UserArr" @bodys="bodys"></gen-body>
            </my-body>

css样式:

<style>
        table{
            width:750px;
        }
        .body {
            width:375px;
            overflow: scroll;
        }
        .header {
            width:375px;
            overflow: scroll;
        }
        tr {
            height:40px;
        }

        td {
            border: 1px solid #ebeef5;
            word-break: break-all;
            text-align: center;
            padding: 0px;
            vertical-align: middle;
        }
        /*用于阻止用户滑动表头*/
        .header {
            touch-action: pan-y;
        }


        .on {
            background: #F5F7FA;
        }

        .off {
            background: white;
        }

        .custom-table--body-wrapper {
            overflow: hidden;
        }

        .custom-table--header-wrapper {
            overflow: hidden;
        }
        .custom-table--fixed-wrapper {
            position: absolute;
            left: 3px;
            /*这个值就是table距离顶部的一个距离,如果页面上有引起table位置变化的因素,那么这个值应该取一个变量和table距离顶部的高度相同,否则会错位*/
            top: 123px;
            bottom: 0;
            background-color: #f8f8f8;
            /*用于覆盖底下的table*/
            z-index: 0;

            width: 93px;
        }
</style>

js函数:不变

效果:

七:固定多列

就变一下css样式

css样式:

  .custom-table--fixed-wrapper {
            position: absolute;
            left: 3px;
            /*这个值就是table距离顶部的一个距离,如果页面上有引起table位置变化的因素,那么这个值应该取一个变量和table距离顶部的高度相同*/
            top: 123px;
            bottom: 0;
            background-color: #f8f8f8;
            /*用于覆盖底下的table*/
            z-index: 0;

            /*这个值用于覆盖多少列,就是固定多少列*/
            width: 280px;
        }

效果

:

 八:固定表头:

其他不变

添加一个jquery函数:用于调节固定的位置这些参数

 $(function () {
        $('.body').on('scroll', function () {
            let left = $(this).scrollLeft();
            $('.header').scrollLeft(left);
        });
        var tab_top = $('.header').offset().top;
        $(window).scroll(function () {
            var scroH = $(this).scrollTop();
            /*35是悬浮位置距离浏览器顶部的高度*/
            if (scroH > tab_top-35) {
                $(".header").css("position", "fixed");
                $(".custom-table--header-wrapper").css("position", "fixed");
                $(".header").css("top", "35px");
                $(".custom-table--header-wrapper").css("top", "35px");
                /*这个数和固定列的宽度一样.custom-table--fixed-wrapper*/
                $(".custom-table--header-wrapper").css("width", "95px");
                /*这个颜色和之前的表头背景色要一样*/
                $(".header").css("background-color", "#f8f8f8");
                $(".custom-table--header-wrapper").css("background-color", "#f8f8f8");
            } else {
                $(".header").css("position", "relative");
                $(".custom-table--header-wrapper").css("position", "relative");
            }
        });
    });

效果:

:

时间匆忙,实现所有效果的情况,有bug,慎用:

比如,固定列和定位靠手动去写多少px,这不科学吧,

左下角穿透底部菜单了 ,从顶部往下滑,表头位置已经不对了 ,比初始下降了一点,导致表体第一行数据被遮挡:

不过这些问题,应该都是很好解决的.

组件源码(很简单就是几个div中放几个插槽):

var mybody = `
<div class="body">
 <slot></slot>
</div>
`

var myhead = `
<div class="header">
<slot></slot>
</div>
`
var myfix = `
<div class="custom-table--fixed-wrapper">
<div class="custom-table--header-wrapper" >
<slot name="fixhead"></slot>
</div>
<div class="custom-table--body-wrapper">
<slot></slot>
</div>
</div>
`


var myBody = {
        template: mybody,
    }
;
var myHead = {
        template: myhead,
    }
;
var myFix = {
        template: myfix,

    }
;


Vue.component('my-body', myBody);
Vue.component('my-head', myHead);
Vue.component('my-fix', myFix);
Vue.component('gen-head', {
    props: ["head"],
    template: genhead,
});
Vue.component('gen-body', {
    props: ["tableData"],
    template: genbody,
});

有问题,欢迎指正批评

 

 

2019年6月7日01:09:02补充:

以上左下角穿透bug:z-index=100可解决

css样式:

<style>
        table {
            width: 750px;
        }

        .body {
            width: 375px;
            overflow: scroll;
            /*这个值要比悬浮div小*/
            z-index: -100;
        }

        .header {
            width: 375px;
            overflow: scroll;
        }

        tr {
            height: 40px;
        }

        td {
            border: 1px solid #ebeef5;
            word-break: break-all;
            text-align: center;
            padding: 0px;
            vertical-align: middle;
        }

        /*用于阻止用户滑动表头*/
        .header {
            touch-action: pan-y;
        }


        .on {
            background: #F5F7FA;
        }

        .off {
            background: white;
        }

        .custom-table--body-wrapper {
            overflow: hidden;
        }

        .custom-table--header-wrapper {
            overflow: hidden;
            /*用于解决左下角穿透底部菜单问题*/
            z-index: 99;

        }

        .custom-table--fixed-wrapper {
            position: absolute;
            left: 3px;
            /*这个值就是table距离顶部的一个距离,如果页面上有引起table位置变化的因素,那么这个值应该取一个变量和table距离顶部的高度相同*/
            top: 123px;
            bottom: 0;
            background-color: #f8f8f8;
            /*用于覆盖底下的table比body大,比他上面的元素要小*/


            /*这个值用于覆盖多少列,就是固定多少列*/
            /*覆盖两列的宽度*/
            /*width: 280px;*/
            /*覆盖一列的宽度*/
            width: 95px;
        }
</style>

 

固定列遮挡第一列问题:解决代码如下:

<script>
  $(function () {
        $('.body').on('scroll', function () {
            let left = $(this).scrollLeft();
            $('.header').scrollLeft(left);
        });
        var tab_top = $('.header').offset().top;
        $(window).scroll(function () {
            var scroH = $(this).scrollTop();
            /*35是悬浮位置距离浏览器顶部的高度*/
            if (scroH > tab_top - 35) {
                $(".header").css("position", "fixed");
                $(".custom-table--header-wrapper").css("position", "fixed");
                $(".header").css("top", "35px");
                $(".custom-table--header-wrapper").css("top", "35px");
                /*这个数和固定列的宽度一样.custom-table--fixed-wrapper*/
                $(".custom-table--header-wrapper").css("width", "95px");
                /*这个颜色和之前的表头背景色要一样*/
                $(".header").css("background-color", "#f8f8f8");
                $(".custom-table--header-wrapper").css("background-color", "#f8f8f8");
            } else {
                $(".header").css("position", "relative");
            /*解决第一行被相对定位的表头遮挡问题*/
                $(".header").css("top", "0px");
                $(".custom-table--header-wrapper").css("position", "relative");
            /*解决第一行被相对定位的表头遮挡问题*/
                $(".custom-table--header-wrapper").css("top", "0px");
            }
        });
    });
</script>

其他问题:

各种浏览器 ,各种 分辨率设备,兼容性问题,横屏问题,有待解决,z-inde=99解决了左下角穿透问题,设置相对定位的 top属性解决了 表头遮挡表体第一行问题,还有不能手写px问题,应该交给js去得到合适的数值,设置合适的数值,而不是手动去赋值!!!

 

最终效果如下:

 最后故意触发那个bug,就是通过点击查询最右边那个大于号,展开了查询条件,导致表格位置发生了变化,而固定列悬浮的div,并没有感受到变化,导致错位,这也是一个bug,也就是说当页面有改变表格位置的动作时,表格固定列和表格其他部分会错位

伟大的程序猿csdn
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
利用better-scroll插件做移动端table可上下左右滑动且固定表头和列
lese_demo的博客
05-17 3515
上下左右滑动时固定表头、列&上拉加载 思路 显示结构 .cross .row .row data.clos data data data.clos data data 思路步骤 配置BScroll配置项 声明BScroll的scroll事件函数：onScroll，在里面取得所有.cross/.row/.clos元素，并对每个元素添加transform样式，且记录实...
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
iOS如何实现表格的折叠效果？
热门推荐
追梦
06-29 1万+
一、实现原理：就是在点击表格组头视图的时候，如果该表格视图的组展开了，就把改组的行设置为0，如果该组隐藏了，就显示该组的所有行。 效果如下： 二、实现步骤 1、定义一个数据模型用于封装数据 #import @interface MyData : NSObject { NSMutableArray *_array;// 每组的数据 BOOL _isShow;/
基于VUE移动端H5表格组件
最新发布
月影神社
06-21 442
使用（根据自身项目调整，本例子只做参考）
vue移动端实现折叠/展开列表支持内部混动
derek_chou的博客
08-09 652
html: <div class="fold" :class="[flag?'open':'close']"> <div v-for="(item,index) in list" :key="index"> ... </div> </div> css: .fold{ overflow:hidden; transition:max-he...
前端表格 合并折行
xiaosi1413的博客
03-28 1448
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action --> <html xmlns="http://www.w3.org/1999.
移动端table固定头部和左侧栏
贪睡的小聪
02-21 2258
使用stick实现 stick实现是可以实现的，但是问题在于移动端的ios 会滚出去边界的时候有回弹效果，就很操蛋 我看简书上有人尝试了挺多种方法去解决，但是效果并不好 https://www.jianshu.com/p/6863ae08c76c 有人可能会说直接用wekit-overflow-scrolling 配置解决就好了鸭 以前还是可以这样去设置的，但是我查阅了很多的资料 在ios13的版本之后就不再支持这个属性配置 那到底如何解决呢，我们先来分析一下为什么ios会产生回弹效果 .box-c
Vue 固定头 固定列 点击表头可排序的表格组件
09-01
在这个特定的场景中，我们讨论的是在Vue中创建一个功能丰富的表格组件，它包括了固定表头（fixed header）、固定列（fixed columns）以及点击表头排序（header click sorting）的功能。这样的组件在处理大量数据时...
vue-video:vue移动端简单自定义控件播放器
05-13
"vue-video" 提供了一个针对移动端优化的简单自定义控件播放器解决方案，使得在Vue项目中集成视频播放功能变得简单。 在创建一个基于Vue的移动端视频播放器时，主要涉及以下几个关键知识点： 1. **Vue组件**：Vue...
Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip
01-16
封装HTML的Table，可直接编辑单元格内容，光标失去焦点时更新表格数据，利用slot插槽绑定操作按钮（编辑，删除、分享等），涉及到技术点包括：父组件给子组件传值、refs 对DOM进行操作，slot具名插槽的使用，插槽...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
table表格固定行和列
05-11
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
AmazeUI折叠式卡片布局，整合内容列表、表格组件实现
11-19
折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发异彩。
javascript 实现table展开折叠
10-24
javascript 实现table展开折叠,table的th部分不变，下端的tr折叠
html5折叠表格
10-25
html5折叠表格
纯css实现table固定首行、首列（主要应用在移动端）
ClassicSong的博客
08-14 3091
PC端的插件bootstrap-table-fixed-columns、bootstrap-table相结合可以实现table固定首行、首列，可是在移动端却玩不转了；改用css实现，省掉了好多插件的引用，主要使用了table的table-layout: fixed以及posotion: sticky
vue 不依赖框架实现table合并单元格，固定列/表头，按照列排序
weixin_50695596的博客
06-24 943
使用vue不依赖任何UI实现 封装一个公共的 table组件，基本的table功能，表头，行，列功能，api用法参看elementUI/antUI,实现固定表头和列实现按照列排序，实现合并单元格，
关于table表格头部固定和列固定的方式
b0303的博客
01-20 3269
无论你用什么框架都要用到table固定列或者表头的现象。最近用到了，写个demo以备后面用，顺便分享一下，提供给徐亚的人。 下面是代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>表格第一行和前几列固定</title&...
vue表格实现固定表头和首列
学习笔记666
09-10 4720
前言 前段时间做移动端的项目，项目中需要一个固定表头和首列的表格，但由于是移动端的，组件库里没有类似的，于是，就去网上找看有没有类似的，结果越找越气，10个文章9个抄，抄也行，你倒是抄个能用的啊，一篇根本就不能用的文章，抄个什么劲？有意义？？？ 没办法，只有自己写一个了。 效果图...
vue实现显示自定义列
05-11
在 Vue 中，可以通过使用动态组件实现显示自定义列。具体步骤如下： 1. 定义一个包含表格列所需数据的数组，例如： ``` data: [ { name: 'John Doe', age: 30, gender: 'male' }, { name: 'Jane Doe', age: 25, ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值