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.本期的教程到了这里就结束啦,是不是很简单,是不是很棒,让我们一起努力走向巅峰!在这个领域,希望你不要低头,不要认输。
本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203322.html