下面是我的代码：
<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('新增')
}
你的v-model不能用item。key，因为你要实现你的效果，需要在data里面定义一个，然后这个组件应该有个方法，就是当你里面内容发现变化时候 触发的方法，然后把里面的值给到定义的值 然后把值给到v-model里面去
不知道你这个问题是否已经解决, 如果还没有解决的话:问题分析：
根据问题描述，用户在输入框里输错内容后进行删除会触发标签页的tab-remove事件，这很可能是因为在输入框中输入时，按下Backspace或Delete键时，输入框捕获了该事件，但是由于事件冒泡机制，该事件会一直向上传递直至到达标签页组件，因此触发了标签页的tab-remove事件。
解决方案：
<el-input v-model="item.title" @keydown.stop></el-input>
<el-input v-model="item.title" @keydown.stop @keypress.prevent="checkEmpty"></el-input>
checkEmpty(e) {
if (e.keyCode === 8 || e.keyCode === 46) { // Backspace和Delete键的keyCode分别为8和46
const input = e.target;
if (!input.value.trim()) { // 当输入框内容为空时，阻止事件默认行为
e.preventDefault();
}
}
},
完整代码：
<el-tabs @tab-remove="handleTabRemove">
<el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.title">
<el-form :model="item">
<el-form-item label="标题">
<el-input v-model="item.title" @keydown.stop @keypress.prevent="checkEmpty"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input type="textarea" v-model="item.content"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
export default {
data() {
return {
tabs: [
{ name: "tab1", title: "标签页1", content: "" },
{ name: "tab2", title: "标签页2", content: "" },
]
};
},
methods: {
handleTabRemove(tab, index) {
this.tabs.splice(index, 1);
},
checkEmpty(e) {
if (e.keyCode === 8 || e.keyCode === 46) {
const input = e.target;
if (!input.value.trim()) {
e.preventDefault();
}
}
},
},
};