实现效果
vue3-seamless-scroll目前有Vue3、Vue2、JavaScript版本。
效果完整代码:
<template>
<div class="table-con">
<ul>
<li class="nums">序号</li>
<li v-for="(item, index) in tableCols" :key="index" :style="{width: item.width}">{{ item.label }}</li>
</ul>
<vue3-seamless-scroll
v-if="tablelist.length"
:list="tablelist"
:direction="top"
:step="0.5"
:hover="true">
<ul v-for="(item, index) in tablelist" :key="index">
<li class="nums">{{ index + 1 < 10 ? `0${index + 1}` : index + 1}}</li>
<li class="name" :title="item.name">{{ item.name }}</li>
<li>{{ item.regionName }}</li>
<li>{{ item.startDate }}</li>
<li>{{ item.finishDate }}</li>
<li class="constructionCompany" :title="item.constructionCompany">
{{ item.constructionCompany }}
</li>
<li class="supervisorCompany" :title="item.supervisorCompany">
{{ item.supervisorCompany }}
</li>
<li class="finishRate">
<el-progress :text-inside="true" :stroke-width="12" :percentage="item.finishRate" color="#42A2FF"></el-progress>
</li>
<li>
<img src="@/assets/images/overviewConstruction/rate.png" alt="">
{{
item.monthRateStr +'%'
}}
</li>
<li class="info">
<span type="text" size="small" style="color: #fff; cursor: pointer;" @click="goNext(item)">前往》</span>
</li>
</ul>
</vue3-seamless-scroll>
<p v-else style="color: #ccc; text-align: center; line-height: 300px;">暂无数据</p>
</div>
</template>
<script setup>
const tableCols = ref([
{
label: "col1",
prop: "name",
width: "270px",
},
{
label: "col2",
prop: "regionName",
width: "180px",
},
{
label: "col3",
prop: "startDate",
width: "180px",
},
{
label: "col4",
prop: "finishDate",
width: "180px",
},
{
label: "col5",
prop: "constructionCompany",
width: "400px",
},
{
label: "col6",
prop: "supervisorCompany",
width: "400px",
},
{
label: "整体进度",
prop: "finishRate",
width: "400px",
},
{
label: "本月推进",
prop: "monthRateStr",
width: "180px",
},
{
label: "col9",
prop: "info",
width: "100px",
},
])
let tablelist = ref([]); //接口返回的列表数据
</script>
<style scoped lang="scss">
.table-con {
width: 100%;
height: 840px;
padding: 20px 20px 25px 20px;
overflow: hidden;
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
width: 100%;
li {
width: 180px;
height: 36px;
line-height: 36px;
text-align: left;
color: #FFF;
font-family: "Alibaba PuHuiTi";
font-size: 14px;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 40px;
font-weight: normal;
// 设置各列宽度与table头对应
&.nums {
width: 80px;
}
&.name {
width: 270px;
}
&.constructionCompany,
&.supervisorCompany,
&.finishRate {
width: 400px;
}
&.info {
width: 100px;
}
&:last-child {
margin-right: 0;
}
}
}
>div {
width: 100%;
height: 95%;
overflow: hidden;
}
:deep(.el-select .el-input__wrapper) {
background-color: #1552C8;
}
:deep(.el-select .el-input__inner) {
color: #fff;
}
:deep(.el-pager li) {
background-color: #0b258a;
color: #fff;
&.is-active {
background-color: #fff;
color: #1552C8;
}
}
:deep(.el-input__wrapper) {
background-color: #0b258a;
color: #fff;
}
:deep(.el-input__inner) {
color: #fff;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px #18e3ff inset !important;
&:hover {
box-shadow: 0 0 0 1px #18e3ff inset !important;
}
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 1px #18e3ff inset !important;
&:hover {
box-shadow: 0 0 0 1px #18e3ff inset !important;
}
}
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #18e3ff inset !important;
}
:deep(.el-scrollbar) {
background-color: #0b258a !important;
}
:deep(.el-scrollbar__wrap) {
background-color: #0b258a;
}
}
</style>
limitScrollNum:开启滚动的数据量,只有列表长度大于等于该值才会滚动。