vue-seamless-scroll element table表单滚动
葛承嗣
<template>
<div class="boxYj">
<div class="earlyWarnin">
<div class="topImg">
<img src="../../assets/images/yj.png" alt="">
</div>
<div class="IconFont">
<img src="../../assets/images/sys.png" alt="">
<p>123</p>
</div>
<div>
<div class="table_main">
<!-- <el-table
:data="tableData"
style="width: 95%"
ref="table"
:row-style="getRowClass"
:header-row-style="getRowClass"
:header-cell-style="getRowClass">
<el-table-column
prop="typeName"
label="事件类型"
key="1"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="supervisionName"
key="2"
show-overflow-tooltip
label="监督模式">
</el-table-column>
<el-table-column
prop="managementName"
key="3"
show-overflow-tooltip
label="处置情况">
</el-table-column>
</el-table> -->
<el-table :data="tableData" class="table">
<el-table-column
v-for="(item,index) in columns"
:key="index+'i'"
:label="item.label"
:prop="item.prop"
/>
</el-table>
<vue-seamless-scroll
:data="tableData"
class="seamless-warp"
style="width: 100%"
:class-option="defaultOption">
<el-table :data="tableData" class="table_scroll">
<el-table-column
v-for="(item,index) in columns"
:key="index+'i'"
:label="item.label"
:prop="item.prop"
/>
</el-table>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
},
computed: {
defaultOption () {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
data () {
return {
columns: [
{ prop: 'typeName', label: '事件类型', minWidth: '100', sort: true },
{ prop: 'supervisionName', label: '监督模式', minWidth: '180', sort: true },
{ prop: 'managementName', label: '处置情况', minWidth: '180', sort: true },
],
tableData: [
{
typeName: "无人机预警",
supervisionName: "行政检查",
managementName: "处置中",
},
{
typeName: "人工巡查",
supervisionName: "刑事检察",
managementName: "待处置",
},
],
};
},
mounted(){},
methods: {
getRowClass({ row, column, rowIndex, columnIndex }) {
return "background:transparent;color:#1CADF1; fontSize:0.16rem;text-align: center;";
},
},
}
</script>
<style scoped>
.boxYj{
margin-top: .1rem;
}
.IconFont{
padding: .1rem;
display: flex;
align-items: center;
padding-bottom: 0;
}
.earlyWarnin{
border: .01rem solid #045589;
background: rgba(1, 11, 19, 0.36);
}
.IconFont img{
width: .28rem;
height: .24rem;
}
.IconFont p{
font-size: .16rem;
font-weight: bold;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff;
line-height: .16px;
margin-left: .1rem;
}
.topImg{
width: 2.5rem;
height: .14rem;
}
.topImg img{
position: absolute;
width: 4.45rem;
height: .14rem;
}
.IconFont h2{
font-size: .2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFF;
line-height: 20px;
padding: 0 .1rem;
}
.explain p{
display: flex;
align-items: center;
margin-left: 0.2rem;
}
.explain .explainleft{
margin-right: .05rem;
width: .03rem;
height: .03rem;
background: #fff;
display: inline-block;
}
.explain p .explainright{
font-size: .12rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: .24rem;
}
/* 修改无限轮播----------------------------------- */
.plantsTitle{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.1rem;
}
.plantsTitle span{
color: rgb(28, 173, 241);
font-size: .12rem;
text-align: center;
flex-shrink: 0;
width:.5rem;
}
.page-example3{
height: 1rem;
overflow: hidden;
}
.ul-scoll li{
padding:0 .1rem ;
line-height: .4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.ul-scoll li span{
flex-shrink: 0;
width:.5rem;
text-align: center;
font-size: .12rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
>>> .cell.el-tooltip{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
font-size: 0.1rem;
color: #fff;
-webkit-line-clamp: 1;
text-align: center;
}
>>> .el-table th.el-table__cell>.cell{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
color: rgb(28, 173, 241);
-webkit-line-clamp: 1;
}
>>> .tebale_card {
color: #fff;
background-color: transparent;
}
>>> .el-table,
>>> .el-table__expanded-cell {
color: #fff;
background-color: transparent;
}
>>> .el-table tr {
background-color: transparent;
color: #fff;
}
>>> .el-table .cell {
line-height: 0.3rem;
border-bottom: none;
}
>>> .el-table .el-table__cell {
padding: 0;
}
>>> .el-table__header {
line-height: 0.4rem;
border-bottom: 0.01rem solid #3a7164;
}
.table_main {
/* margin-top: 0.2rem; */
margin-left: 0.16rem;
}
>>> .el-table::before {
height: 0;
}
>>> .el-tabs__nav-wrap::after {
position: static !important;
}
>>> .el-table tbody tr:hover > td {
background-color: rgba(1, 100, 204, 0.5) !important;
cursor: pointer;
}
>>> .el-table td.el-table__cell,
>>> .el-table th.el-table__cell.is-leaf {
border: none;
}
/* 滑动Y */
>>> .el-table th.el-table__cell {
/* background: none; */
}
>>> .el-table--scrollable-y .el-table__body-wrapper {
overflow-y: hidden;
}
/* 滑动X*/
>>> .el-table th.el-table__cell {
background: none;
}
>>> .el-table--scrollable-y .el-table__body-wrapper {
overflow-y: hidden;
}
>>>.el-table--scrollable-x .el-table__body-wrapper{
overflow-x: hidden;
}
.table_main >>>.table .el-table__body-wrapper {
display: none;
}
.seamless-warp {
margin-top: 10px;
height: 60px;
overflow: hidden;
}
.seamless-warp >>> .el-table .el-table__header-wrapper {
display: none;
}
</style>
类似资料：