vue elementui中使表的滚动条 滚到顶部或底部

vue elementui中使表的滚动条 滚到顶部或底部

步骤

  • 1.设置table的ref为tableList

  • 2.设置滚动至顶部

this.$refs.tableList.bodyWrapper.scrollTop =0;
  • 3.设置滚动至底部
this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tableList.bodyWrapper.scrollHeight;
  • 4.如果请求完更新数据,需要使用$nextTick
this.$nextTick(() => {
    this.$refs.tableList.bodyWrapper.scrollTop=this.$refs.tableList.bodyWrapper.scrollHeight;
})
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Element UI Select 组件本身没有内置滚动功能。如果需要在选择框内容过多时进行滚动,可以通过自定义CSS样式或使用一些其他方法来实现滚动效果。 如果你想要在下拉框的选项过多时添加滚动功能,你可以通过设置下拉框的最大高度,然后使用CSS的overflow属性来添加滚动条。例如,你可以使用以下代码来实现这个效果: ```css .el-select-dropdown .el-select-dropdown__wrap { max-height: 200px; // 设置最大高度 overflow-y: auto; // 添加垂直滚动条 } ``` 这样,当下拉框的选项过多时,会自动出现滚动条,并限制最大高度为200像素。 另外,你还可以自定义指令来添加滚动功能。你可以在Vue定义一个自定义指令,并在Select组件上使用该指令,通过该指令来添加滚动功能。以下是一个自定义指令的示例: ```javascript Vue.directive('scroll', { inserted: function(el, binding) { el.style.overflow = 'auto'; // 添加滚动条 el.style.maxHeight = binding.value + 'px'; // 设置最大高度 } }); ``` 然后,你可以在Select组件上使用这个自定义指令: ```html <el-select v-scroll="200"> <!-- 选项内容 --> </el-select> ``` 这样,就可以给Select组件添加滚动功能,并设置最大高度为200像素。 总结来说,要想在Vue Element UI Select实现滚动效果,你可以通过设置CSS样式来添加滚动条,或者通过自定义指令来实现滚动功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值