< 返回技术文档列表

elemenui+vue-seamless-scroll表格自动滚动

发布时间:2022-11-17 22:33:13⊙投诉举报

1、下载依赖

npm i element-ui -Snpm install vue-seamless-scroll --save

2、在main.js直接导入

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import scroll from 'vue-seamless-scroll'Vue.use(ElementUI).use(vueSeamlessScroll);

3、使用scrollTable.vue
注意:
.seamless-warp的高度要等于一组数据展现到高度,
比方不滚动的时候table的高度为500px,那在这里设置的高度不能高于500否则显示会有问题

<template>  <div class="backround">    <div class="toptitle">      <div class="item">日期</div>      <div class="item">姓名</div>      <div class="item">地址</div>    </div>    <vue-seamless-scroll :data="listData" class="seamless-warp">      <el-table :data="listData" :show-header="status">        <el-table-column prop="date" label="日期"> </el-table-column>        <el-table-column prop="title" label="姓名"> </el-table-column>        <el-table-column prop="test" label="地址"> </el-table-column>      </el-table>    </vue-seamless-scroll>  </div></template><script>export default {  data() {    return {      status: false,      listData: [        {          date: "20221116",          title: "第一行",          test: "测试",        },        {          date: "20221116",          title: "第2行",          test: "测试",        },        { date: "20221116", title: "第3行", test: "测试" },        { date: "20221116", title: "第4行", test: "测试" },        { date: "20221116", title: "第5行", test: "测试" },        { date: "20221116", title: "第6行", test: "测试" },      ],    };  },  computed: {    optionHover() {      return {        step: 0.5, // 数值越大速度滚动越快        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length        hoverStop: true, // 能否开启鼠标悬停stop        direction: 1, // 0向下 1向上 2向左 3向右        openWatch: true, // 开启数据实时监控刷新dom        singleHeight: 50, // 单步运动中止的高度(默认值0是无缝不中止的滚动) direction => 0/1        // singleWidth: 0, // 单步运动中止的宽度(默认值0是无缝不中止的滚动) direction => 2/3        waitTime: 1000, // 单步运动中止的时间(默认值1000ms)      };    },  },};</script><style>.seamless-warp {  height: 300px;  overflow: hidden;}.el-table .cell {  text-align: center;}.toptitle {  width: 100%;  display: flex;  background-color: red;  margin-bottom: 10px;  border-bottom: 1px solid green;  background-color: transparent;  color: pink;}.item {  width: 33.3%;  height: 48px;  line-height: 48px;  text-align: center;}</style>

/template/Home/Zkeys/PC/Static