element的tabs组件使用问题解决

这篇具有很好参考价值的文章主要介绍了element的tabs组件使用问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.去除el-tabs组件自带的键盘切换功能

今天在使用element的tabs组件时,发现这个tab组件自带了按键盘左右方向,切换tab的功能,可以通过使用@keydown.native.capture.stop去除该事件

<el-tabs v-model="editableTabsValue"
                 type="card"
                 :addable="true"
                 size="small"
                 tab-position="top"
                 style="height:100%"
                 @keydown.native.capture.stop
                 ref="tabs">
</el-tabs>
2.我在el-tabs组件的标签中嵌套了el-input之后,发现每次在el-input中输入文字,光标都会跳到最后一位。具体原因不知。

最终的解决办法就是不使用el-input。而是使用原生的input。这样光标就不会总在最后一位了。文章来源地址https://www.toymoban.com/news/detail-715038.html

<input
                    class="tabInput"
                    autocomplete="off"
                    type="text"
                    @blur="closeRenameTab('msg')"
                    @change="closeRenameTab('no')"
                    @input.stop
                    v-model="one.title" >
              </input>
.tabInput{
  position: relative;
  font-size: 12px;
  display: inline-block;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  height: 25px;
  line-height: 25px;
  outline: none;
  padding: 0 7px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
}

到了这里,关于element的tabs组件使用问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【前端】解决element-ui的form组件resetFields()方法不生效的问题

    使用 element-ui 的 form 组件,在输入栏较多的时候,有时 resetFields 只能重置一部分输入框的值 给每个值赋值初始值为空即可 例如,需要清除的 :model=\\\"queryForm.bgnTime\\\" 、 :model=\\\"queryForm.endTime\\\" 等一系列的值,那么就不要只定义 queryForm:{} ,而是要把对象下的各个属性赋值初值为空

    2024年02月15日
    浏览(53)
  • element UI el-tabs组件使用

    使用 Elemenet UI 框架中的 el-tabs 组件 平时在做项目时,tab切换效果几乎是必不可少的,下来整理一个最近做的一个小功能:el-tabs    说明: v-model:当前选中项 :tab-position:tab栏显示方向 @tab-click:切换tab栏的事件 JS:

    2024年02月11日
    浏览(43)
  • 【Vue】Vue 使用 Print.js 打印选中区域的html,用到的是Element ui table表格,解决页面样式不出现或者table表格样式错乱问题!!!

    需求 : 打击打印按钮,文字内容以及表格中的内容 解决方案 加上这句就好了!完美! 一、因为表格数据过多,之前加了表格滚动条,但是打印出来 会把表格上的滚动条也打印出来,所以这里改成了 给弹框加滚动条,去掉表格中的滚动条 2.1 原因: table-layout: fixed导致的,

    2024年02月09日
    浏览(66)
  • 如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?

    最近开发项目时,在 el-tab-pane 标签上使用 v-show,即使  v-show  的值为 false,el-tab 的标签仍然展示。即使将  v-show  加在 slot 子节点上,也会显示 tab 的背景图和 close 图标;如下图: 所以针对该问题,各种方案做了一个尝试,下面做一个总结,希望对你有帮助。 但是有些场

    2024年01月19日
    浏览(42)
  • vue的element ui使用el-table组件实现懒加载树、默认自动展开层级(一层,二层)、并且解决新增、删除、修改之后树节点不刷新问题

    问题 :数据量太大了,导致接口返回数据时间较长。 解决 : 将ElementUi中Table组件加载改为懒加载(查看文档)。 思路 :初始化打开页面时只显示第一级菜单,用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单;后台只用有一个根据菜单id查询他子菜单的接口就可以

    2024年01月16日
    浏览(40)
  • 前端Vue自定义可自由滚动新闻栏tabs选项卡标签栏标题栏组件

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(48)
  • 解决element无法溢出问题,table,card,tabs等

    解决element无法溢出问题 注意:只能 style scoped 内使用/deep/,如果你已经style用于scss或其他,可以额外再写一个style,内只写/deep/,scoped是限制在当前作用域,如果不需要可以去掉

    2024年02月11日
    浏览(49)
  • vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

    因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快  (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过)  在执行下面操作之前,你要确定你的阿里云能看到上边这个页面   这里主

    2024年02月10日
    浏览(60)
  • 前端Vue自定义商品订单tabs标题栏选项卡组件 可设置文字下划线颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(43)
  • Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)

    使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 方法部分:用id来区分,正常新增id为0,复制id不为0 按上述代码操作后,点击列表操作栏的复制按钮会跳转到新增页面并且

    2024年02月05日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包