初始化数据
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=falsesetTimeout(() => {this.$refs.inputsonus[id].focus()}, 100);},//失去焦点输入框变成文字按钮submit(id){if(this.Bonuslist[id].Bonuslistbai==''){this.$message({message: '请填写分红比例',type: 'warning'});return}this.Bonuslist[id].flag=true},
如果觉得《vue element 点击按钮 按钮成为输入框》对你有帮助，请点赞、收藏，并留下你的观点哦！
