vue-seamless-scroll +element表格获取后台数据无法滚动或弹回顶部
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
今天出现一个bug,当在vue-seamless-scroll中把数据放入wholeflowtableData: [],没有问题,可以正常轮播。
但是当动态获取后端数据时缺会出现弹回顶部的问题
问题原因:由于拿到后端数据后我们用push方法一个个push进wholeflowtableData,导致它高度的获取出现问题,从而div发生溢出,无法进行滚动
解决方案:
1.定义一个新的数组arr去接收,然后再利用拷贝,将arr这个数组的内容一次性的去拷贝到wholeflowtableData当中,就不会出现如上问题
2.利用v-if判断传过来的数据是否长度大于0,比如wholeflowtableData.length > 0
,让其有数据内容再滚动
2.当前后端数据名称不一致时进行循环赋值引用时也会出现这种情况
(1)获取后台数据名称不一致时:
<div class="table_content_body" style="height: 94%">
<vue-seamless-scroll
:data="wholeflowtableData"
:class-option="optionSetting"
class="auto-scorll-table"
>
<el-table
:data="wholeflowtableData"
:span-method="objectSpanMethod"
style="width: 100%"
:show-header="false"
>
<el-table-column prop="index" align="center" width="180" />
<el-table-column prop="state" align="center" />
<el-table-column prop="type" align="center" />
</el-table>
</vue-seamless-scroll>
</div>
export default {
data() {
return {
wholeflowtableData: [],
};
},
computed: {
optionSetting() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: this.wholeflowtableData.length / 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
mounted() {
this.asd();
},
methods: {
async asd() {
var temp = await rightscroll();//发送请求得到数据
console.log("temp" + temp);
//{
//"index":"2022-1-11",
// "state":"24时次",
// "type":true
//},
var k = 0;
var arr=[];//定义一个新数组用来接收后台的数组
for (let i = 0; i < 8; i++) {
if (k > 8) {//进行遍历
break;
}
let g = {};//定义一个空对象用来放我们重命名的对象数组
console.log(k);
g["index"] = temp[k].index;
g["state"] = temp[k].state;
g["type"] = temp[k].type;
k = k + 1;
arr.push(g) //一次循环,将每一组数据放入
}
console.log("arr"+arr);
this.wholeflowtableData = JSON.parse(JSON.stringify(arr))//将arr数组拷贝
},
},
};
(2)获取后台数据:当后端数据名称和前端数据名称一致时
代码:
export default {
data() {
return {
wholeflowtableData: [],
};
},
computed: {
optionSetting() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: this.wholeflowtableData.length / 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
mounted() {
this.asd();
},
methods: {
async asd() {
var temp = await rightscroll();
this.wholeflowtableData = temp //只需要赋值即可
},
},
};
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)