固定表格头跟第一列

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量62 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liushannet/p/3256933.html
版权

版本一:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.test{
    width:300px;
    height:200px;
    overflow: auto;
}
#table{
    width:500px;
    height:500px;
    border:1px solid #ccc;
}
table{
    background: #fff;
}
</style>
</head>
<body>
<div class="test">
<table id="table">
    <thead>
        <tr>
            <th>r\t</th>
            <th>top1</th>
            <th>top2</th>
            <th>top3</th>
            <th>top4</th>
            <th>top5</th>
            <th>top6</th>
            <th>top7</th>
        </tr>
        </thead>
    <tbody>
        <tr>
            <td>re:1</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:2</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:3</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:4</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:5</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:6</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:7</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:8</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:9</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:10</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
</div>
<script type="text/javascript">
    (function(){
        //dome
        //支持参数 ID 或 CLASS
        table_fixed_nav(table);
        //dome
        
        
        
        function table_fixed_nav(id){
            if(typeof id == 'object'){
                table=id;
            }else{
                if(id.indexOf('.')==0){
                    var adom=document.getElementsByTagName("*"),
                        i=0,
                        reg=new RegExp('(^| )'+id.substring(1)+'( |$)'),
                        ps=[];
                    for(;i<adom.length;i++){
                        var t=adom[i],
                            clsname=t.className;
                        if(reg.test(clsname)){
                            ps.push(t);
                        }
                    }
                    for(i=0;i<ps.length;i++){
                        table_fixed_nav(ps[i]);
                    }
                    return ;
                }else{
                    var table=document.getElementById(id);
                }
            }
            if(!(table&&table.tagName.toLowerCase()=='table'))
                return false;
            var num2px=function(num){
                    return ''+num+'px';
                },
                px2num=function(px){
                    return parseInt(px.replace('px',''));
                },
                getw=function(node){
                    var sw=function(node){
                        if(node.currentStyle)
                            return px2num(node.currentStyle.width);
                        else if (window.getComputedStyle)
                            return px2num(window.getComputedStyle(node).width);    
                        else
                            return px2num(node.style.width);
                    }(node);
                    var lw=px2num(node.style.borderLeftWidth)||1,
                        rw=px2num(node.style.borderLeftWidth)||1;
                    return sw||(node.offsetWidth-lw-rw);
                },
                geth=function(node){
                    var sh=function(node){
                        if(node.currentStyle)
                            return px2num(node.currentStyle.height);
                        else if (window.getComputedStyle)
                            return px2num(window.getComputedStyle(node).height);    
                        else
                            return px2num(node.style.height);
                    }(node);
                    var tw=px2num(node.style.borderTopWidth)||1,
                        bw=px2num(node.style.borderBottomWidth)||1;
                    return sh||(node.offsetHeight-tw-bw);
                },
                addlistener=function(node,event,fn){
                    if(node.addEventListener)
                        node.addEventListener(event,fn,false);
                    else if(node.attachEvent)
                        node.attachEvent('on'+event,fn);
                },
                cpcss=function(node,attr){
                    if(node.currentStyle)
                        return node.currentStyle[attr];
                    else if (window.getComputedStyle)
                        return window.getComputedStyle(node)[attr];    
                }
                ;
            
            var div_style={//wrap style
                    position:'relative'
                },
                wrap=document.createElement('div');
            for(k in div_style){
                wrap.style[k]=div_style[k];
            }
            var pwrap=table.parentNode;
            pwrap.insertBefore(wrap,table);
            wrap.appendChild(table);
            wrap.style.width=num2px(getw(pwrap));
            wrap.style.height=num2px(geth(pwrap));
            wrap.style.zIndex='1';
            wrap.style.overflow=function(){
                if(pwrap.currentStyle)
                    return pwrap.currentStyle.overflow;
                else if (window.getComputedStyle)
                    return window.getComputedStyle(pwrap).overflow;    
            }();
            /*wrap.style.borderLeftWidth=cpcss(table,'borderLeftWidth');
            wrap.style.borderTopWidth=cpcss(table,'borderTopWidth');
            wrap.style.borderBottomWidth=cpcss(table,'borderBottomWidth');
            wrap.style.borderRightWidth=cpcss(table,'borderRightWidth');
            
            wrap.style.borderLeftStyle=cpcss(table,'borderLeftStyle');
            wrap.style.borderTopStyle=cpcss(table,'borderTopStyle');
            wrap.style.borderBottomStyle=cpcss(table,'borderBottomStyle');
            wrap.style.borderRightStyle=cpcss(table,'borderRightStyle');
            
            wrap.style.borderLeftColor=cpcss(table,'borderLeftColor');
            wrap.style.borderTopColor=cpcss(table,'borderTopColor');
            wrap.style.borderBottomColor=cpcss(table,'borderBottomColor');
            wrap.style.borderRightColor=cpcss(table,'borderRightColor');*/
            
            pwrap.style.overflow="hidden";
            
            
            //copy top
            var rowtable=table.cloneNode(true);
            rowtable.removeAttribute('id');
            rowtable.style.position='absolute';
            rowtable.style.left='0px';
            rowtable.style.top='0px';
            rowtable.style.zIndex='2';
            rowtable.style.border='0px';
            wrap.appendChild(rowtable);
            rowtable.style.width=num2px(getw(table));
            var i=1,
                rows=rowtable.rows,
                len=rows.length;
            for(;i<len;i++){
                var row=rows[1];
                row.parentNode.removeChild(row);
            }
            
            var ch=rows[0].childNodes,
                len=ch.length,
                i=0;
            for(;i<len;i++){
                var otd=table.rows[0].childNodes[i],
                    std=ch[i];
                if(std.nodeType==1){
                    std.style.width=num2px(getw(otd));
                    std.style.height=num2px(geth(otd));
                }
            }
            //copy left
            var celtable=table.cloneNode(true);
            celtable.removeAttribute('id');
            celtable.style.position='absolute';
            celtable.style.left='0px';
            celtable.style.top='0px';
            celtable.style.zIndex='2';
            celtable.style.border='0px';
            wrap.appendChild(celtable);
            celtable.style.height=num2px(geth(table));
            var rows=celtable.rows,i=0;
            for(;i<rows.length;i++){
                var first=false,
                    fcs=rows[i].childNodes,
                    j=0,
                    len=fcs.length;
                for(;j<len;j++){
                    var fc=fcs[0];
                    if(fc.nodeType==1){
                        if(!first){
                            otd=table.rows[i].childNodes[j];
                            fc.style.width=num2px(getw(otd));
                            fc.style.height=num2px(geth(otd));
                            first=true;
                        }else{
                            var ns=fc.nextSibling;
                            ns.parentNode.removeChild(ns);
                        }
                    }else{
                        fc.parentNode.removeChild(fc);
                    }
                }
            }
            
            var tittable=table.cloneNode(true);
            tittable.removeAttribute('id');
            tittable.style.position='absolute';
            tittable.style.left='0px';
            tittable.style.top='0px';
            tittable.style.zIndex='3';
            tittable.style.border='0px';
            wrap.appendChild(tittable);
            var rows=tittable.rows,i=0;
            for(;i<rows.length;i++){
                var first=false,
                    fcs=rows[i].childNodes,
                    j=0,
                    len=fcs.length;
                for(;j<len;j++){
                    var fc=fcs[0];
                    if(fc.nodeType==1){
                        if(!first){
                            otd=table.rows[i].childNodes[j];
                            fc.style.width=num2px(getw(otd));
                            fc.style.height=num2px(geth(otd));
                            first=true;
                        }else{
                            var ns=fc.nextSibling;
                            ns.parentNode.removeChild(ns);
                        }
                    }else{
                        fc.parentNode.removeChild(fc);
                    }
                }
            }
            var i=1,
                rows=tittable.rows,
                len=rows.length;
            for(;i<len;i++){
                var row=rows[1];
                row.parentNode.removeChild(row);
            }
            
            
            
            tittable_pleft=px2num(cpcss(table,'borderLeftWidth'))+px2num(cpcss(table,'borderRightWidth'));
            tittable.style.left=num2px(-tittable_pleft);
            //bind event
            addlistener(wrap,'scroll',function(){
                var top=wrap.scrollTop,
                    left=wrap.scrollLeft;
                rowtable.style.top=num2px(top);
                celtable.style.left=num2px(left);
                tittable.style.top=num2px(top);
                tittable.style.left=num2px(left-tittable_pleft);
            });
            
            table.style.border='0px';
        }
    
    })();
</script>
</body>
</html>

缺点:CHROME IE 浏览器 改变TOP LEFT会震动

修改以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.test{
    width:200px;
    height:150px;
}
.table{
    width:500px;
    height:500px;
}
table{
    background: #fff;
}
</style>
</head>
<body>
<div class="test">
<table class="table">
    <thead>
        <tr>
            <th>r\t</th>
            <th>top1</th>
            <th>top2</th>
            <th>top3</th>
            <th>top4</th>
            <th>top5</th>
            <th>top6</th>
            <th>top7</th>
        </tr>
        </thead>
    <tbody>
        <tr>
            <td>re:1</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:2</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:3</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:4</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:5</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:6</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:7</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:8</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:9</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
        <tr>
            <td>re:10</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Jill</td>
            <td>Smith</td>        
            <td>50</td>
            <td>50</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
</div>
<script type="text/javascript">
    (function(){
        //dome
        //支持参数 ID 或 CLASS
        table_fixed_nav('.table');
        //dome
        function table_fixed_nav(id){
            if(typeof id == 'object'){
                table=id;
            }else{
                if(id.indexOf('.')==0){
                    var adom=document.getElementsByTagName("*"),
                        i=0,
                        reg=new RegExp('(^| )'+id.substring(1)+'( |$)'),
                        ps=[];
                    for(;i<adom.length;i++){
                        var t=adom[i],
                            clsname=t.className;
                        if(reg.test(clsname)){
                            ps.push(t);
                        }
                    }
                    for(i=0;i<ps.length;i++){
                        table_fixed_nav(ps[i]);
                    }
                    return ;
                }else{
                    var table=document.getElementById(id);
                }
            }
            if(!(table&&table.tagName.toLowerCase()=='table'))
                return false;
            var num2px=function(num){
                    return ''+num+'px';
                },
                px2num=function(px){
                    return parseInt(px.replace('px',''));
                },
                getw=function(node){
                    var sw=function(node){
                        if(node.currentStyle)
                            return px2num(node.currentStyle.width);
                        else if (window.getComputedStyle)
                            return px2num(window.getComputedStyle(node).width);    
                        else
                            return px2num(node.style.width);
                    }(node);
                    var lw=px2num(node.style.borderLeftWidth)||1,
                        rw=px2num(node.style.borderLeftWidth)||1;
                    return sw||(node.offsetWidth-lw-rw);
                },
                geth=function(node){
                    var sh=function(node){
                        if(node.currentStyle)
                            return px2num(node.currentStyle.height);
                        else if (window.getComputedStyle)
                            return px2num(window.getComputedStyle(node).height);    
                        else
                            return px2num(node.style.height);
                    }(node);
                    var tw=px2num(node.style.borderTopWidth)||1,
                        bw=px2num(node.style.borderBottomWidth)||1;
                    return sh||(node.offsetHeight-tw-bw);
                },
                addlistener=function(node,event,fn){
                    if(node.addEventListener)
                        node.addEventListener(event,fn,false);
                    else if(node.attachEvent)
                        node.attachEvent('on'+event,fn);
                },
                cpcss=function(node,attr){
                    if(node.currentStyle)
                        return node.currentStyle[attr];
                    else if (window.getComputedStyle)
                        return window.getComputedStyle(node)[attr];    
                },
                create_wrap=function(pwrap,table){
                    var div_style={//public style
                            position:'relative'
                        },
                        wrap=document.createElement('div');
                    for(k in div_style){
                        wrap.style[k]=div_style[k];
                    }
                    pwrap.appendChild(wrap);
                    wrap.appendChild(table);
                    return wrap;
                }
                ;
            var pwrap=table.parentNode;
            pwrap.style.overflow="hidden";
            pwrap.style.position="relative";
            
            var fix_w=function(){
                    var nds=table.rows[0].firstChild;
                    while(nds){
                        if(nds.nodeType==1){
                            return num2px(getw(nds))
                        }
                        nds=nds.nextSibling;
                    }
                }(),
                fix_h=function(){
                    var nds=table.rows[0].firstChild;
                    while(nds){
                        if(nds.nodeType==1){
                            return num2px(geth(nds))
                        }
                        nds=nds.nextSibling;
                    }
                }();
            
            
            var tittable=table.cloneNode(true),
                titwrap=create_wrap(pwrap,tittable);
            tittable.removeAttribute('id');
            titwrap.style.position='absolute';
            titwrap.style.left='0px';
            titwrap.style.top='0px';
            titwrap.style.zIndex='5';
            titwrap.style.overflow='hidden';
            titwrap.style.width=fix_w;
            titwrap.style.height=fix_h;
        
            
            var rowtable=table.cloneNode(true),
                rowwrap=create_wrap(pwrap,rowtable);
            rowtable.removeAttribute('id');
            rowwrap.style.position='absolute';
            rowwrap.style.left='0px';
            rowwrap.style.top='0px';
            rowwrap.style.zIndex='4';
            rowwrap.scrollTop=0;
            rowwrap.style.height=fix_h;
            rowwrap.style.width=num2px(getw(pwrap));
            rowwrap.style.overflow='hidden';
            
            
            
            var clotable=table.cloneNode(true),
                clowrap=create_wrap(pwrap,clotable);
            clotable.removeAttribute('id');
            clowrap.style.position='absolute';
            clowrap.style.left='0px';
            clowrap.style.top='0px';
            clowrap.style.zIndex='4';
            clowrap.style.width=fix_w;
            clowrap.style.height=num2px(geth(pwrap));
            clowrap.style.overflow='hidden';
            clowrap.scrollTop=0;
            
            var wrap=create_wrap(pwrap,table);
            wrap.style.width=num2px(getw(pwrap));
            wrap.style.height=num2px(geth(pwrap));
            wrap.style.position='absolute';
            wrap.style.left='0px';
            wrap.style.top='0px';
            wrap.style.zIndex='3';
            wrap.style.overflow='auto';
            wrap.style.height=num2px(geth(pwrap));
            wrap.style.width=num2px(getw(pwrap));
            var scro_h=wrap.offsetHeight-wrap.clientHeight,
                scro_w=wrap.offsetWidth-wrap.clientWidth;
            //fix scroll width height
            rowwrap.style.width=num2px(getw(pwrap)-scro_w);
            clowrap.style.height=num2px(geth(pwrap)-scro_h);
            
            addlistener(wrap,'scroll',function(){
                clowrap.scrollTop=wrap.scrollTop;
                rowwrap.scrollLeft=wrap.scrollLeft;
            });
        }
    
    })();
</script>
</body>
</html>

版本二参考:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html

修改scrolltop 跟scrollLeft不会...

转载于:https://www.cnblogs.com/liushannet/p/3256933.html

weixin_30652271
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android可固定表头和第一列自定义表格
04-03
Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
表格-固定列 固定行
weixin_30773135的博客
09-17 158
当一个表格展示的数据相当多的时候，经常会用到固定列，固定行的事情 原理 是 两个或者多个表格组合行程 固定行或者固定列的情况 ，为了保障样式的统一性 当固定行的时候，要限定宽 当固定列的时候，要限定高 运用的插件 fixed-table.js 以及相关css 例子： html部分： <div class="table-scrollable"...
vue移动端复杂表格表头，固定表头与固定第一列
热门推荐
全栈修炼
07-28 1万+
前言 最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些例子，在此做一了一个完整的vue版的例子。 效果 无图无真相，先上最终效果图再说 。 方法一：iscroll 插件版 第一步：npm install 引入 iscroll npm i iscroll --save 第二步：封装 对插件再做一层封装...
实现表格第一列固定
Joyce的前端日常
05-21 8890
背景 (1) 需求 固定表格的第一列，其余列可以左右滑动。这样的需求往往出现在移动端的表格显示。 (2) 难点 这个功能的难点在于：如果把第一列从表格中抽出，行无法对齐。 (3) 已有解决方案 网上有很多解决方案： 固定表格高度，只能显示一列。将第一列抽出固定在最左。 js动态计算各高度 对于这些方案要不过于繁琐复杂，要不单行显示不利于用户体验。 实现 对于...
layui表格更改一列数据_layui数据表格固定头部和第一列、colspan合并列
weixin_30636329的博客
01-27 1046
刚看到原型图的时候，纳尼？不是跟我开玩笑吧，小女子资历尚浅，还真没做过像这样的功能，然后就是各种找度娘，可是都没有找到合适的，很多都是行合并，真的是头疼呀！再纠结是用VUE实现还是用layui实现好，在最后挣扎下，还是选择了用layui。最后加上从各大神的demo中得到的灵感。在这里记录一下，希望可以帮助到有需要的人啦~移动端展示效果如下：![]()1 23 layui.use('table', ...
html表格table表头和首列固定
ZGH_77733的博客
09-26 3637
需要引用一下jquery：主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。HTML的表格比安卓的表格简单很多，更适合做一些复杂的表格，下面是一种能将表格首列与表头固定，表格内容可滑动的表格，分享给大家。
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
移动端table固定表头与固定第一列
02-20
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
QT表格固定第一列，拖动时第一列不会遮挡
04-02
QT表格固定第一列，有需要的同学下来参考
HTML表格固定第一行第一列效果
11-06
在网页上实现类似Excel的效果，数据滚动条拖动固定第一行和第一列，附代码备注，一目了然
一个小时学习javaScript
weixin_43064364的博客
04-20 937
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 589
官网代码（在取消选中状态的时候不生效）
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 1002
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1515
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
vue 实现级联选择器功能
清音的博客
04-22 505
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 399
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图
pblh123的专栏
04-17 1058
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。
vue3【详解】 vue3 比 vue2 快的原因
朝阳39的博客
04-19 940
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！
使用vue3+ts+vite从零开始搭建bolg(二)
qq_75246137的博客
04-21 236
svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。component中的index.ts,注册全局组件。package.json中的scripts配置项。vite.config.ts文档中配置。SvgIcon的index.vue文件。.env.development文件。.env.production文件。vite.config.ts配置。tsconfig.ts配置。.env.test文件。
用C语言打印第一列固定内容表格
06-13
您可以使用C语言的循环语句和格式化输出函数来打印第一列固定内容的表格。下面是一个简单的示例代码： ``` #include int main() { int i, j; int rows = 5; // 表格行数 int cols = 3; // 表格列数 // 打印...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值