el-tabs可以实现对标签页的编辑和删除

Question

el-tabs可以实现对标签页的编辑和删除

现在的问题是标签页的编辑可以实现了，可以正常输入数据

但是在输入框里输错了进行backspace(删除)/delete的时候会触发标签页的tab-remove事件

感觉跟双向绑定有关，不知道怎么修改

下面是我的代码：

<el-tabs type="card" v-model="defaultValue" :before-leave="beforeLeave" @tab-remove="removeTab">
      <el-tab-pane v-for="item in cardList" :name="item.name" :key="item.key" :closable="true">
        <span slot="label">
          <span v-if="!contenteditable">{{ item.key }}</span>
          <el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur"></el-input>
          <el-button type="text" size="mini" v-if="!contenteditable" @click="handleEdit"><i class="el-icon-edit"></i></el-button>
          <el-button type="text" size="mini" v-if="contenteditable" @click="handleSave"><i class="el-icon-check"></i></el-button>
        </span>
        <el-row :gutter="20">
          <el-col :span="6" v-for="obj in item.value" :key="obj.id">
            <el-card :body-style="{padding:'0px'}">
              {{ obj.linkName }}
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane name="cusToBtn" :closable="false">
        <el-button type="text" size="mini" @click="handleAdd">+</el-button>
      </el-tab-pane>
    </el-tabs>

handleBlur (e) {
      this.lastName = e.target.placeholder
      this.newName = e.target.value
    },
    beforeLeave (visitName, currentName) {
      if (visitName === 'cusToBtn') {
        return false
      }
    },
    removeTab (targetName) {
      console.log(targetName)
    },
    handleEdit () {
      this.contenteditable = true
    },
    handleSave () {
      this.contenteditable = false
    },
    handleAdd () {
      console.log('新增')
    }

Answer 1

你的v-model不能用item。key，因为你要实现你的效果，需要在data里面定义一个，然后这个组件应该有个方法，就是当你里面内容发现变化时候 触发的方法，然后把里面的值给到定义的值 然后把值给到v-model里面去