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

一 基本用法:

js模板:

css样式:

html组件:

js函数:

无

效果:

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

 二:单行合并单元格

js模板:

css样式:

其他不变.

效果:

:

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

js模板:

其他不变:

效果:

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

js模板:

css样式:不变

html组件:

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模板:

css样式:

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

js(vue data不变):

js(vue methods不变):

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

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

效果:

 

六:固定第一列:

js模板:跟之前的一样

html组件:

css样式:

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 = `

 

`

var myhead = `



`
var myfix = `








`


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样式:

 

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

其他问题:

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

 

最终效果如下:

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