vue 列表内容自动向上滚动_vue表格向上滚动

vue表格向上滚动

1.开发环境 vue.js+element+ts

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 中添加如下代码:

:rowNum="12"

:config="configdisplacementofDam"

style="width: 100%; height: 100%"

/>

3-4:在methods中添加如下代码://上部分轮播表的方法

chenlunbobiao(): void {

this.configdisplacementofDam = {

data: this.datadisplacementofDam, // 表数据

header: this.headerdisplacementofDam, // 表头数据

rowNum: 6, // 表行数

// headerBGC: '#fff', // 表头背景色

// oddRowBGC: '#fff', // 奇数行背景色

// evenRowBGC: '#fff', // 偶数行背景色

waitTime: 1000, // 轮播时间间隔(ms)

align: "center",

};

},

3-5:在mouted中添加如下代码:this.chenlunbobiao();

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

// 轮播表数据

headerdisplacementofDam: [

"异常设备",

"异常原因",

"持续时间",

"横偏(X)",

"纵偏(Y)",

],

datadisplacementofDam: [

['石马1', "6.36", "6.36", "6.36", "6.36"],

["石马2", "6.36", "6.36", "6.36", "6.36"],

[

"石马3",

'6.36',

"6.36",

"6.36",

"6.36",

],

["石马4", "6.36", "6.36", "6.36", "6.36"],

["石马5", "6.36", "6.36", "6.36", "6.36"],

["石马6", "6.36", "6.36", "6.36", "6.36"],

["石马7", "6.36", "6.36", "6.36", "6.36"],

["石马8", "6.36", "6.36", "6.36", "6.36"],

["石马9", "6.36", "6.36", "6.36", "6.36"],

["石马10", "6.36", "6.36", "6.36", "6.36"],

["石马11", "6.36", "6.36", "6.36", "6.36"],

["石马12", "6.36", "6.36", "6.36", "6.36"],

],

configdisplacementofDam: {},

};

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

5.这一块的内容是向上不断的滚动。

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