国外个人网站模板站长工具查询域名

一、运用场景：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.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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>