vue element 点击按钮按钮成为输入框

最新推荐文章于 2024-08-29 10:04:34 发布

牙牙子

最新推荐文章于 2024-08-29 10:04:34 发布

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/kenandeyaya/article/details/126346732

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初始化数据

Bonuslist:[{
					id:0,
                    Bonuslistbai:'20%',
					flag:true
				},{
					id:1,
                    Bonuslistbai:'20%',
					flag:true
				},{
					id:2,
                    Bonuslistbai:'20%',
					flag:true
				},{
					id:3,
                    Bonuslistbai:'20%',
					flag:true
				},{
					id:4,
                    Bonuslistbai:'20%',
					flag:true
				},{
					id:5,
                    Bonuslistbai:'20%',
					flag:true
				},],

渲染数据

<td style="width:150px" v-for="(item,index) in Bonuslist" :key="index"><el-button @click="Bonus(item.id)" v-show="item.flag" type="text">{{item.Bonuslistbai}}</el-button><el-input style="width:150px" ref="inputsonus" v-show="item.flag==false" @keyup.enter.native="$event.target.blur" v-model="item.Bonuslistbai" @blur="submit(item.id)" placeholder="请输入内容"></el-input></td>

方法

//点击文字按钮 文字按钮成为成为输入框 并自动获取焦点
			Bonus(id){
				this.Bonuslist[id].flag=false
				setTimeout(() => {
					this.$refs.inputsonus[id].focus()
				}, 100);
			},
		    //失去焦点输入框变成文字按钮
			submit(id){
				if(this.Bonuslist[id].Bonuslistbai==''){
					 this.$message({
                      message: '请填写分红比例',
                      type: 'warning'
                      });
					return
				}
				this.Bonuslist[id].flag=true
			},