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. dotnet core 之 gRPC

    dotnet core gRPC 原文在本人公众号中,欢迎关注我,时不时的会分享一些心得 HTTP和RPC是现代微服务架构中很常用的数据传输方式,两者有很多相似之处,但是又有很大的不同.HTTP是一种 ...

  2. 深入理解Session和Cookie的区别

    Cookie简介 Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制. 目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Op ...

  3. Python【day 9】函数入门2

    本节内容:1. 什么是函数2. 函数定义, 函数名, 函数体以及函数的调⽤3. 函数的返回值4. 函数的参数 一.什么是函数 我们可以先去定义一个事情或者功能(接口.服务.函数.功能). 等到需要的时 ...

  4. tkinter的trace()变动追踪

    tkinter的trace() 的参数w是写入追踪 from tkinter import * def callback(*args): xl.set(xE.get()) print("改变 ...

  5. javascript获取url中的参数值

    javascript的实现代码如下: function QueryString(fieldName) { var urlString = document.location.search; if(ur ...

  6. SpringBoot学习笔记:http接口请求

    controller package com.example.demo.controller; import java.util.HashMap; import java.util.Map; impo ...

  7. android studio学习----Android Studio导入github下载的工程--替换方法

    http://www.cnblogs.com/liuling/p/2015-9-16-01.html 这种方法是可行的,主要是先自己创建一个project ,然后把没有的文件夹都复制过去就OK了,特别 ...

  8. 高性能TcpServer(Java) - Netty

    源码下载 -> 提取码  QQ:505645074 Netty 是一个高性能.异步事件驱动的 NIO 框架,它提供了对 TCP.UDP 和文件传输的支持,作为一个异步 NIO 框架,Netty ...

  9. springboot入门介绍

    1. SpringBoot学习之@SpringBootApplication注解 下面是我们经常见到SpringBoot启动类代码: @SpringBootApplicationpublic clas ...

  10. EntityManager 的复杂查询

    EntityManager 是用来对实体Bean 进行操作的辅助类.他可以用来产生/删除持久化的实体Bean,通过主键查找实体bean,也可以通过EJB3 QL 语言查找满足条件的实体Bean.实体B ...