一、运用场景:VUE开发的项目中需要表格滚动展示信息
二、组件:vue-seamless-scroll
三、使用:通过ul
标签+css
样式模拟表格,表头+表数据
安装
npm install vue-seamless-scroll --save
在main.js中引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll) // 滚动
在.vue页面中使用
<div class="tableBox">
<p class="tableHeader">
<span>等级</span>
<span>名称</span>
</p>
<vue-seamless-scroll :data="warningData" :class-option="optionHover">
<ul class="waringBox">
<li v-for="item in warningData" :key="item.alarmId">
<span>{{ item.alarmLevel }}</span>
<span :title="item.alarmName">{{ item.alarmName }}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
在实际运用中,一般会加上点击事件,会出现点击失效的问题。
那么,需要在上面的基础上,最外层加上点击事件,在span中绑定data数据。
<div class="tableBox" @click="goDetail($event)">
<p class="tableHeader">
<span>等级</span>
<span>名称</span>
</p>
<vue-seamless-scroll :data="warningData" :class-option="optionHover">
<ul class="waringBox">
<li v-for="item in warningData" :key="item.alarmId">
<span>{{ item.alarmLevel }}</span>
<span :data-obj="JSON.stringify(item.alarmId)" :title="item.alarmName">{{ item.alarmName }}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
<script>
export default {
name: "ScrollTable",
data() {
warningData: [
{ alarmId: 1, alarmLevel: "紧急", alarmName: "告警一"},
{ alarmId: 2, alarmLevel: "紧急", alarmName: "告警二"},
{ alarmId: 3, alarmLevel: "一般", alarmName: "告警3"},
{ alarmId: 4, alarmLevel: "严重", alarmName: "告警4"},
{ alarmId: 5, alarmLevel: "提示", alarmName: "告警5"},
{ alarmId: 6, alarmLevel: "其它", alarmName: "告警6"},
{ alarmId: 7, alarmLevel: "提示", alarmName: "告警7"},
{ alarmId: 8, alarmLevel: "其它", alarmName: "告警8"}
]
},
computed: {
// 表格滚动效果;
optionHover() {
return {
step: 0.4, // 0.5 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
};
},
},
methods: {
goDetail(e) {
//打印出来的e.target就是点击的span元素
//拿到span元素身上的自定义属性obj , obj本身是字符串, JSON.parse转成对象
let alarmId = JSON.parse(e.target.dataset.obj);
console.log(alarmId); // 打印 alarmId
},
}
}
<style lang="sass" scoped>
.tableBox{
width: 200px;
height: 300px;
overflow: hidden;
border-radius: 6px;
border: 1px solid #e8e8e8;
.tableHeader{
position: relative;
z-index: 10;
display: flex;
color: #333;
margin: 0;
padding: 6px;
background: #e7e7e7;
span{
display: inline-block;
text-align: center;
}
span:nth-child(1){
width: 48px;
}
span:nth-child(2){
flex: 1;
}
}
ul.waringBox{
margin-bottom: 0;
li{
display: flex;
margin-bottom: 0;
padding: 2px;
border-top: 1px solid #e8e8e8;
span{
display: inline-block;
text-align: center;
}
span:nth-child(1){
width: 44px;
}
span:nth-child(2){
flex: 1;
cursor: pointer;
white-space: nowrap; //强制文本在一行内输出
overflow: hidden; //隐藏溢出部分
text-overflow: ellipsis; //对溢出部分加上...
}
}
}
}
</style>