1、vue下input文本框获得光标

html:

<el-input size="mini" clearable v-model.trim="addOrEditData.gridCode" ref="inputGridCode" ></el-input>

js(在需要触发获取input光标方法加入下面js,如果需要再进入页面获得就获得光标则在vue钩子函数mounted加上下面代码:):

 this.$refs.inputGridCode.focus();

2、vue中input文本框内容选中

方法一:

html:

<el-input size="mini" clearable v-model.trim="addOrEditData.gridCode" ref="inputGridCode"  @@focus="inputFocus($event)"></el-input>

js方法:

inputFocus(event) {
event.currentTarget.select();
}

方法二:

html:

<el-input size="mini" clearable v-model.trim="addOrEditData.gridCode" ref="inputGridCode" ></el-input>

js:

this.$refs.inputGridCode.select();

vue、element-ui开发技巧的更多相关文章

  1. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  10. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. 《 .NET并发编程实战》阅读指南 - 第5章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  2. redis 缓存问题汇总

    前言:在使用redis的时候,特别是大型应用,会碰到不少问题,下面就来总结一下使用redis时的常见问题 一.redis为缓存的问题 1.缓存和数据库双写一致性问题 分析:一致性问题是分布式常见问题, ...

  3. webapi 返回类型

    参考 大神;https://www.cnblogs.com/landeanfen/p/5501487.html

  4. 配置Java,jdk环境变量

    注意:所有的都是配系统变量 变量名:JAVA_HOME 变量值:D:\Program Files\Java\jdk1.8.0_202(以自己的为准)变量名:Path 变量值:%JAVA_HOME%\b ...

  5. elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示

    1.html <el-table-column prop="taxes" :render-header="renderHeader" width=&quo ...

  6. css1.0~3.0背景图使用多张折叠的概念与方法

    需求:使用多张图片作为页面的背景图: 首先需要了解background的属性以及细节知识:https://www.cnblogs.com/chenglj/p/7372996.html backgrou ...

  7. android 第三方开源库 学习汇总之Butter Knife

    如果直接在App中使用,那么只需要在app的build.gradle中添加即可. android { ... // Butterknife requires Java 8. compileOption ...

  8. FFmpeg基础一

    来源:http://blog.csdn.net/chance_yin/article/details/10323441 一.研究数字多媒体,首先要了解几个基本术语(ffmpeg的相关文档几乎都是英文的 ...

  9. 安装gcc-c++报错解决办法

    问题 每次安装依赖包gcc-c++的时候,经常会遇到包如下错误   Error: Package: libstdc++-devel--.el7_4..x86_64 (ultra-centos-7.4- ...

  10. B端产品经理的金字塔能力模型

    工作这几年,时长思考,作为B端产品经理自己应该具备什么样的能力? 虽然工作依旧在有条不紊的进行,但是时常会陷入到对知识或者能力的焦虑当中.特别时是工作三五年,产品经理进阶门槛时. 虽然产品经理的能力是 ...