Vue.js
如何动态添加和删除按钮
发布于 8 个月前 作者 huaer 479 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

要实现的效果见下图，先在带+号的button里输入要添加的值，鼠标离开控件后，该控件变为可删除的button，带+号的button移到后面以便后续添加
1536302185_25893

3 回复

好像不行，感觉是值没有push到list里，每次点击 【添加】的button之后，界面又重新刷新了回到了初始状态

你怎么写的？
贴一下代码吧

在elementUI的官方文档里找到了现成的控件，好吧，是我自己没仔细看文档
实现代码如下：
template：

    <el-tag
      v-for="(item,index) in freqlist"
      :key="index"
      :disable-transitions="false"
      closable
      @close="_delete(index)">
      {{ item }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="saveTagInput"
      v-model="freq"
      class="input-new-tag"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-else class="button-new-tag" @click="showInput">+ 频点</el-button>

script：

data() {
return {
  deviceid: 'ZDK2AD001',
  carrierid: 3,
  resulttimer: '',
  inputVisible: false,
  freq: '',
  value: '',
  freqlist: [], 
}}
methods: {
showInput() {
  this.inputVisible = true
  this.$nextTick(_ => {
    this.$refs.saveTagInput.$refs.input.focus()
  })
},
_delete(index) {
  this.freqlist.splice(index, 1)
},
handleInputConfirm() {
  const inputValue = this.freq
  if (inputValue) {
    this.freqlist.push(inputValue)
  }
  this.inputVisible = false
  this.freq = ''
},
}

style：

<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
background-color: #409eff;
color: #fff;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
回到顶部