Element Plus滚动条el-scrollbar始终保持在底部

这篇具有很好参考价值的文章主要介绍了Element Plus滚动条el-scrollbar始终保持在底部。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<script setup lang="ts">
import { dayjs } from 'element-plus';
import { ElScrollbar as ElScrollbarType } from 'element-plus';

const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
const items = ref<string[]>([])

const handleClick = () => {
  items.value.push(dayjs().format('YYYY-MM-DD HH:mm:ss SSS'));
  nextTick(() => {
    if (innerRef.value!.clientHeight > 200) {
      scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    }
    
  })
}

</script>
<template>
  <el-scrollbar height="200px" ref="scrollbarRef" always>
    <div ref="innerRef">
      <p v-for="item in items" :key="item" class="scrollbar-demo-item">{{ item }}</p>
    </div>
  </el-scrollbar>
  <el-button type="primary" @click="handleClick">add</el-button>
</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}
</style>

DEMO代码地址: GitHub - rdzhaoxin/scrollbar-demo: vue3 element plus scrollbar demo

在线预览:Glitch :・゚✧文章来源地址https://www.toymoban.com/news/detail-527503.html

到了这里,关于Element Plus滚动条el-scrollbar始终保持在底部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element plus el-table 添加滚动监听

    项目上使用 el-table 加载1000 条数据,同时有三个列的数据需要实时更新,而数据更新时会导致页面不响应,表现为拖动过程中突然卡顿。为了解决卡顿问题提出了两个解决办法:一个是滚动时清除定时器,不再刷新表格,滚动结束后恢复定时器;另一个是只刷新视口数据,更

    2024年02月06日
    浏览(41)
  • Element plus el-table 鼠标滚动失灵的问题及解决办法

    Bug:ElementUI el-table 鼠标滚轮下滑动失灵的情况 我测出来的这个问题条件很苛刻,需要达到以下几个条件才会触发: 1.element plus(其他版本没试) 2.el-table-column组件有fixed属性时 3.template标签中有el-button,并且el-button有size=“small”时 4.我的浏览器缩放(Ctrl+滚轮)达到110%时 会

    2024年02月13日
    浏览(43)
  • vue element-ui分页插件 始终保持在页面底部样式

    最近在写前端页面的时候,有一个小需求就是保证分页插件一直保持在底部,表单数据增多的时候出现竖向的滚动条。 直接上代码 样式 效果展示

    2024年02月11日
    浏览(50)
  • 【Vue3+element plus 】el-table滚动条、固定列fixed、表头超出内容隐藏并显示省略号

            element plus中el-table采用的是el-scrollbar,无法采用全局默认滚动条样式修改,需要单独写公共样式。 原生滚动条样式 el-table滚动条样式 效果图:         el-table设置了自定义样式后,为el-table-column添加fixed=\\\"right\\\"属性,此时表格侧边栏固定列出现样式错乱,自定义

    2024年02月12日
    浏览(57)
  • element ui的table组件横向滚动条始终位于可视区域

    需求:表格行数过多,就需要先滚动到表格底部,才能使用横向滚动条,这给用户带来了不便。 思路:在表格内部生成一个自定义横向滚动条,当表格原生的横向滚动条没出现在可视区域范围时,将自定义滚动条调整到视口底部位置,反之隐藏该自定义滚动条。 使用:由于用的是V

    2024年02月11日
    浏览(43)
  • el-table点击表格某一行添加到URL参数,访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]

    需求 :有个表格列出了一些行数据,每个行数据点击后会加载出对应的详细数据,想要在点击了某一行后,能够将该点击反应到URL中,这样我复制这个URL发给其他人,他们打开时也能看到同样的行数据。 url会根据点击动态更新,大概是这样 xxx.com?param1=var1param2=var2 主要版本

    2024年02月14日
    浏览(63)
  • Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

    由于项目不便展示,因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 源码调试时发现下拉菜单是直接放在body 元素里,这时候希望它不要直接放在body里, 查阅文档看到这两个属性: 但是添加了上面的属性后,出现了新的问题,要么是不生效,要么是下拉

    2024年02月12日
    浏览(36)
  • Element UI中el-dialog中内容超出自定义滚动条

    2.1 dialog中嵌套div,给div设置高度,并且overflow属性为auto,布局如下图: 3.1sass或less写法 3.2 原生写法

    2024年02月15日
    浏览(45)
  • vue使用element-ui或者element-plus固定 el-header 和 el-aside

    vue使用element-ui或者element-plus固定 el-header 和 el-aside 在使用element-plus做后台管理的时候,需要固定el-header和el-aside,特此记录以下。 只需要将el-main固定高度即可。 main.vue css 将 el-main 高度后,当 el-main 内容超出固定高度后就能显示滚轮了。将滚轮样式修改一下就好了。 效果:

    2024年02月13日
    浏览(49)
  • element plus el-form双列布局及拓展任意布局

    一般表单我们直接默认布局,也就是单列布局,突然有个人员信息表单,需要双列布局的需求,简单实现并拓展下 直接无脑div+flex布局实现 这样的无脑实现实在是对不起付出的时间,不嫩复用是最大问题 封装el-form,增加slot // Form.vue // index.vue 依然不够通用,因为布局是固定

    2024年01月25日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包