js實(shí)現(xiàn)移動(dòng)端簡易滑動(dòng)表格

第js實(shí)現(xiàn)移動(dòng)端簡易滑動(dòng)表格本文實(shí)例為大家分享了js實(shí)現(xiàn)移動(dòng)端簡易滑動(dòng)表格的具體代碼，供大家參考，具體內(nèi)容如下

上js文件代碼

template

view

scroll-viewscroll-x="true"

view

view

viewv-for="(item,i)inthList":key="i"{{

item

}}/view

/view

!--這里會(huì)自動(dòng)遍歷出對(duì)象數(shù)組中的數(shù)據(jù)--

viewv-if="!useCusTdList"

viewv-for="(item,n)intdData":key="n"

viewv-for="(val,key,i)initem":key="i+n"{{

val

}}/view

/view

/view

!--這里會(huì)使用tdList中定義的字段的數(shù)據(jù)--

viewv-if="useCusTdList"

viewv-for="(item,n)intdData":key="n"

viewv-for="(tdName,i)intdList":key="i+n"

viewv-if="!slotData"{{item[tdName]}}/view

viewv-else

slot

name="scoped"

:row="{value:item[tdName],key:tdName}"

/slot

/view

/view

/view

/view

/view

!--撐開空間，防止最后一行的下邊框無法顯示--

view/view

/scroll-view

/view

/template

script

exportdefault{

name:'CusTable',

props:{

thList:{

type:Array,

default:function(){

return[]

}

},

tdList:{

type:Array,

default:function(){

return[]

}

},

tdData:{

type:Array,

default:function(){

return[]

}

},

useCusTdList:{

useCusTdList:Boolean,

default:false

},

slotData:{//是否使用插槽

useCusTdList:Boolean,

default:false

}

},

data(){

return{}

},

methods:{}

/script

stylelang="scss"

/*scroll-view樣式*/

.scroll-table{

min-height:100rpx;

white-space:nowrap;

//padding:10rpx20rpx;

//margin-top:30rpx;

padding-bottom:60rpx;

.scroll-tr{

min-width:750rpx;

display:inline-block;

/*表頭樣式*/

.cus-th{

background-color:#f3f3f3;

}

/*行樣式*/

.cus-tr{

box-sizing:border-box;

display:flex;

flex-direction:row;

flex-wrap:nowrap;

justify-content:flex-start;

align-items:stretch;

align-content:center;

height:100%;

/*設(shè)置邊框*/

border-color:#ccc;

border-style:solid;

border-width:0;

border-top-width:1px;

border-left-width:1px;

border-bottom-width:1px;

color:#333;

+.cus-tr{

border-top-style:none;

}

/*表格樣式*/

.cus-td{

width:220rpx;

box-sizing:border-box;

padding:1px;

font-size:25rpx;

word-break:break-all;

border-color:#ccc;

border-style:solid;

border-width:0;

border-right-width:1px;

min-height:60rpx;

white-space:pre-wrap;

word-wrap:break-word;

/**/

display:flex;

justify-content:center;//左右居中

align-items:center;//上下居中

/*跨列*/

-colspan{

flex-grow:1;

width:0;

}

/*內(nèi)容頂部對(duì)齊*/

-top{

align-items:flex-start;

align-content:flex-start;

}

/*內(nèi)容底部對(duì)齊*/

-bottom{

align-items:flex-end;

align-content:flex-end;

}

/*內(nèi)容左邊對(duì)齊*/

-left{

justify-content:flex-start;

}

/*內(nèi)容右邊對(duì)齊*/

-right{

justify-cont