多个el-input编辑标题，每次只有一个可输入，其他隐藏
项目有一个需求，可以实现el-tab的标题可编辑，所以我加了一个el-input输入框，选择性展示，点击编辑的时候输入框打开
<el-input v-if="contenteditable" v-model="item.key" :placeholder="item.name" @blur="handleBlur"></el-input>
但是每次编辑打开的时候所有标题的输入框都开启，有没有办法每次只开启我点击编辑的那个输入框
有没有友友能帮忙看下！！谢谢啦
这是我的完整代码：
<template>
<div>
<el-tabs type="card" v-model="defaultValue">
<el-tab-pane v-for="item in tableList" :name="item.name" :key="item.key">
<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="small" v-if="!contenteditable" @click="handleEdit"><i class="el-icon-edit"></i></el-button>
<el-button type="text" size="small" 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"
class="preViewCard">
<el-card :body-style="{ padding: '0px' }">
<span style="display: block">{{ obj.name }}</span>
</el-card>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default{
data () {
return {
defaultValue: '1',
contenteditable: false,
tableList: [
{
key: '1',
name: '1',
value: [
{
id: 12,
name: 'card',
type: '1'
},
{
id: 13,
name: 'card',
type: '1'
},
{
id: 14,
name: 'card',
type: '1'
},
{
id: 15,
name: 'card',
type: '1'
}
]
},
{
key: '2',
name: '2',
value: [
{
id: 111,
name: 'card',
type: '2'
},
{
id: 121,
name: 'card',
type: '2'
},
{
id: 131,
name: 'card',
type: '2'
},
{
id: 141,
name: 'card',
type: '2'
}
]
}
]
}
},
created () {
},
methods: {
handleBlur () {
},
handleEdit () {
this.contenteditable = true
},
handleSave () {
this.contenteditable = false
}
}
}
</script>
