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.本期的教程到了这里就完结啦,是不是很简略,是不是很棒,让咱们一起致力走向巅峰!在这个畛域,心愿你不要抬头,不要认输。