vue组件之 列表滚动条左移时前2列悬浮固定 类似于 Element-Table表格-固定列

用无序列表开发固定列

废话不多说直接上代码:

源代码数据部分有涉及保密协议 经过一系列删改后可能会导致代码报错
代码仅供参考，后续有时间会写一个直接可用的demo 重新上传

<template>
<div id="WipReport">
<div class="shop">
<div class="shop_div">
<div class="shop_div_scroll" ref="myTable" @scroll="MyScrollLeft">
<div id="LIST_div">
<!--浮动层-->
<ul class="ListFole" ref="myFole">
<li class="Fole_List FoleTitle">
<ul>
<li>头部1</li>
<li>头部2</li>
</ul>
</li>
<li class="MyFoleList" :style="{height:pageHeight+'px'}">
<ul :style="{marginTop:marginTop+'px'}">
<li v-for="(folelist,index) in DATA"  class="Fole_List" :style="{backgroundColor:(index+1)%2==0?'#dfe7fd':'white'}">
<ul>
<li>{{folelist.buname}}</li>
<li>{{folelist.skuno}}</li>
</ul>
<li/>
</ul>
</li>
</ul>
<!--主体-->
<ul class="shop_div_ul" >
<!--列表标题-->
<li class="column_title">
<ul>
<li v-for="(columntitle) in DATATITLE"  :style="{lineHeight:(columntitle.length)>7?'30px':'60px',fontSize:columntitle.length>7 ? '18px':'20px'}" v-html="(columntitle.length)>7?titleTEXT(columntitle):columntitle"></li>

</ul>
</li>
<!--列表主体-->
<li class="column_List" :style="{height:pageHeight+'px'}" @scroll="MyScrollTop">
<ul>
<li v-for="(data,index) in DATA"  class="column" :style="{backgroundColor:(index+1)%2==0?'#dfe7fd':'white'}">
<ul>
<li v-for="(MyData,key) in (data.stationname)" >

<el-tooltip  class="item" effect="dark"  placement="bottom" :transition="null">
<div slot="content" v-html="data.minstation == MyData.name?'最小目标'+data.minqty+'<br/>最大目标:'+MyData.maxqty+'<br/>output : '+MyData.output:'最大目标:'+MyData.maxqty+'<br/>output : '+MyData.output">
</div>
<el-button :style="{backgroundColor:(index+1)%2==0?'#dfe7fd':'white',border:'0',width:'100%',padding:'0',height:'100%',borderRadius:'20px',color:data.minstation == MyData.name?'blue':'',fontWeight:data.minstation == MyData.name?'bold':''}">
{{MyData.wipqty}}
</el-button>
</el-tooltip>

</li>

</ul>
</li>
</ul>
</li>
</ul>
</div>

</div>
<div class="scroll">
</div>

</div>
</div>

<el-button class="BTNCSV" @click="downloadClick" icon="el-icon-download" circle></el-button>
</div>
</template>

<script>
export default {
name: "WipReport",
data(){
return{
pageHeight: `${document.documentElement.clientHeight}` -250,//423
DATATITLE:["33333", "44444", "55555", "6666666", "77777", "88", "99999", "101010", "11111-11111", "1212", "131313", "14141414", "15151515", "161616161616", "1717"],//导航栏目
marginTop:0,//主体层滚动控制浮动外边距形成滚动同步
//全部数据
DATA: [{,   //一列的数据
buname: "6456546+",
commit: "0",
counts: "14",
id: "1",
minqty: "",
minstation: "",
namelist:["33333", "44444", "55555", "6666666", "77777", "88", "99999", "101010", "11111-11111", "1212", "131313", "14141414", "15151515", "161616161616", "1717"],
output: "8",
rate: "0",
skuno: "416541661",
stationname:[
{
maxqty: "0"
name: "4564645"
output: "0"
wipqty: "0"
} //这里要15个这样的数据
]
}]

},
components:{
NavMenu,Header
},
mounted(){
this.getTableData()
},
methods:{
// 瓶頸工站定位
MyArr(arr,val){
for(let i in arr) {
if (arr[i] == val) {
return i;
}
}
},
// 表头部分项换行处理
titleTEXT(val){
let txt=val.split('')
txt.splice(4, 0, "<br/>");
return  txt.join('')
},
//列表显示条数
handleSizeChange(val) {
this.pageSize=val;
this.getTableData()
},
//列表显示第几页
handleCurrentChange(val) {
this.currentPage=val;
this.getTableData()
},
//整体横向滚动时设置浮动层浮动形成固定栏
MyScrollLeft(num){
if(num.srcElement.scrollLeft>0){
this.$refs.myFole.style.position='absolute';
this.$refs.myFole.style.boxShadow='3px -1px 10px #CDC9C9';
}else {
this.$refs.myFole.style.position='';
this.$refs.myFole.style.boxShadow='';
}

},
//主体层滚动控制浮动外边距形成滚动同步
MyScrollTop(num){
this.marginTop=0-(num.srcElement.scrollTop)
}
},

}
</script>

<style lang="scss" scoped>
#WipReport{
background-color: #edeef2;
height: 100%;
}
ul,li{list-style: none; margin: 0;padding: 0}
#WipReport .shop{
width: 100%;
background-color: #edeef2;
padding: 0 4% 40px;
margin-top: 40px;
box-sizing: border-box;
text-align: center;
}
.shop_div_scroll{
width: 100%;
overflow: hidden;
overflow-x: scroll;
/*overflow-y: hidden;*/
}
#WipReport .shop_div{
border-radius: 30px;
width: 100%;
padding: 40px 60px 20px;
background-color:white;
box-sizing: border-box;
}
/*列表总宽度*/
#LIST_div{
width:1930px;
display: flex;
}

/*浮动层列表*/
.ListFole{
flex: none;
width: 230px;

}
.ListFole .Fole_List ul{
display: flex;
}
.ListFole .Fole_List ul li{
line-height: 40px;
font-size: 12px;
flex: 1;
}
.ListFole .FoleTitle ul li{
background-color: #547dec;
color: white;
line-height: 60px;
font-size: 20px;
}
.ListFole .Fole_List ul li:hover{
background-color:#87CEFA;
}
.MyFoleList{
overflow: hidden;
}

/*主体层*/
.shop_div_ul{
flex: 1;
}
.column_title ul{

width: 100%;
background-color: #547dec;
color: white;
height: 60px;
}
.column_title ul{
display: flex;
text-align: center;
}
.column_title ul li{
flex:1 ;
/*line-height: 60px;*/
/*font-size: 20px;*/
/*word-break: break-all;*/
}

.column_List{
/*overflow: scroll;*/
overflow-y: auto;

}

.column ul{
display: flex;
text-align: center;
}
.column ul li{
flex:1 ;
line-height: 40px;
font-size: 12px;
}
/*.title ul li{*/
/*font-size: 18px;*/
/*padding: 10px 0;*/
/*}*/
.column ul li:hover{
background-color:#87CEFA;
}
/*分页*/
.paging{
margin-top: 10px;
}
/*滚动条*/
::-webkit-scrollbar {
height: 12px; width: 12px;
}
::-webkit-scrollbar-track {
background-color:#EEE9E9;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
::-webkit-scrollbar-thumb {
background-color:#4169E1;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius:2em;
}
/*下载按钮*/
.BTNCSV{
position: absolute;
width: 50px;
height: 50px;
left: 240px;
top: 96px;
padding: 0;
font-size: 25px;
margin-left: 20px;
cursor:pointer
}
/*消息提示*/
.box {
width: 400px;

/*.top {*/
/*text-align: center;*/
/*}*/

/*.left {*/
/*float: left;*/
/*width: 60px;*/
/*}*/

/*.right {*/
/*float: right;*/
/*width: 60px;*/
/*}*/

.bottom {
clear: both;
text-align: center;
}
.item {
margin: 4px;
}
.left .el-tooltip__popper,
.right .el-tooltip__popper {
padding: 8px 10px;
}
}

.search-area{
display: flex;
justify-content: flex-end;
margin-bottom: 25px;
}
.search-area .el-select{
width: 180px;
}
.search-area .el-input{
width: 250px;
margin-left: 10px;
}
.el-icon-search{
font-size: 18px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
</style>