vue中怎么点击修改文字_vue实现双击修改文字内容并重新排序

我们项目中遇到双击修改信息也比较常见，尤其是后台管理系统

如上图，这就是一个可以对关键词进行手动排序的功能，双击数字的span标签后，span变成一个文本框，失去焦点则变回来，并根据排名按照从小到大重新排序。

起初用原生代码来写，逻辑很简单，但是有问题，

第一是很丑，不过可以在创建的时候写样式，能解决。

第二是，你的失焦事件只能写在双击事件里，或者render函数中，也还行。

第三是，如果你已经触发了第一个的双击事件，但是再去双击第二个，页面上就会出现多个input，由于我的页面很简单，没有其他的input，于是我在双击事件的一开始先判断页面上有没有input，有的话，用span替换过来，但是如果有其它input，就不能这样用了。

总之就是，有小坑，不过都能解决，但是解决了之后，你的代码就是一大坨。

我说上面这么多废话，是因为我都用原生写完了，也部署到服务器了，但是太丑了，自己没眼看，于是删掉重新换了个思路。

如下：

先把标签都写好，用布尔值控制显隐

每一条数据要有单独的布尔值，如果你的数据很多，可以让后台多返回一个布尔值字段，我因为一共只有十个关键词，就在初始获取数据的时候自己循环添加了，默认为false。

两个方法如下：

好啦~

另：elementui的table有一个cell-dbclick方法，把这个方法写在el-table标签中，其它的不变就可以了。scope.$index可以获取每一行的索引

vue中怎么点击修改文字_vue实现双击修改文字内容并重新排序相关推荐

vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
vue中如何点击返回上一页，vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
vue中怎么点击修改文字_vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...
vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索
看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
【Vue】Vue 中如何点击跳转页面
2022-04-11更新:完整的跳转页面方法的详解:[Vue | 补洞 | 18]编程式路由导航思路:在有路由的情况下,对页面进行注册,并通过方法对路由中的实例(页面)进行转发,达到跳转页面的效果 ...

vue中怎么点击修改文字_vue实现双击修改文字内容并重新排序

vue中怎么点击修改文字_vue实现双击修改文字内容并重新排序相关推荐

最新文章

热门文章