vue表格向上滚动

vue表格向上滚动
1.开发环境 vue.js
2.电脑系统 windows 10 专业版
3.在开发的过程中,我们经常会做一些表格向上滚动的效果!本次是自己总结的方法,希望对你有所帮助。
3-1: 使用的插件:datav轮播表使用事例,地址是:
http://datav.jiaminghi.com/gu…
3-2:我们找到 轮播表,点击进入轮播表。
3-2-1:在终端执行命令:

npm install @jiaminghi/data-view

3-2-2:在main.js中添加如下代码:

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

3-3:在template 中添加如下代码:

<template>  
 <div id="ystj-BottomMaterial">  
 <div class="ystj-BottomMaterial-title">  
 <div class="title-left"></div>  
 <div>这里是标题</div>  
 </div> <div class="ystj-BottomMaterial-center">  
 <div class="chartsOption">  
 <dv-scroll-board :config="config" />  
 </div> </div> </div></template>

3-4:在methods中添加如下代码:

getScrollboard () {  
  this.config = {  
    header: ['材料类别', '单位', '进厂量', '消耗量', '损耗率'],  
 data: [  
      ['钢筋', '万吨', '44', '333', '444'],  
 ['水泥 ', '万吨', '123', '33', '11'],  
 ['砂石', '万吨', '12', '2', '1'],  
 ['砼', '万吨', '43', '33', '22'],  
 ['钢筋', '万吨', '44', '333', '444'],  
 ['水泥 ', '万吨', '123', '33', '2'],  
 ['砂石', '万吨', '12', '2', '0'],  
 ['砼', '万吨', '43', '33', '12']  
    ],  
 headerBGC: 'transparent',  
 oddRowBGC: '#06266F',  
 evenRowBGC: '#072256'  
 }  
}

3-5:在mouted中添加如下代码:

this.getScrollboard()

3-6:在style中添加如下代码:

#ystj-BottomMaterial {  
  width: 100%;  
 height: 48%;  
 box-sizing: border-box;  
 border: 1px solid #005ebe;  
 border-radius: 7px;  
 box-shadow: -1px -2px 20px -7px rgba(255, 255, 255, 0.5) inset;  
  
 opacity: 0.76;  
 background-image: linear-gradient(90deg, #0e1451 0%, #151643 100%);  
 border: 1px solid #5f72c2;  
 box-shadow: inset 0 0 10px 0 #556ac3;  
 border-radius: 6px;  
 background: #09104a;  
 overflow: hidden;  
 .ystj-BottomMaterial-title {  
    width: 100%;  
 height: 50px;  
 border-bottom: 1px solid #005ebe;  
 display: flex;  
 flex-direction: initial;  
 align-items: center;  
 font-size: 16px;  
 font-weight: 500;  
 .title-left {  
      width: 4px;  
 height: 18px;  
 background: rgba(67, 202, 255, 1);  
 border-radius: 2px;  
 margin-left: 20px;  
 margin-right: 20px;  
 }  
  }  
  .ystj-BottomMaterial-center {  
    width: 100%;  
 height: 80%;  
 display: flex;  
 flex-direction: column;  
 .chartsOption {  
      width: 100%;  
 height: 100%;  
 }  
  }  
}

4.你会看到这样的效果:

5.这一块的内容是向上不断的滚动。
6.本期的教程到了这里就结束啦,是不是很简单,是不是很棒,让我们一起努力走向巅峰!在这个领域,希望你不要低头,不要认输。