多个el-input编辑标题，每次只有一个可输入，其他隐藏

Question

多个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>

Answer 1

1.在data中增加变量currentIndex: "", isEdit: false（是否编辑）;
2.在el-input标签中用v-if或者v-show来控制el-input是否展示

3.再点击编辑的时候，将defaultValue的值赋给currentIndex，isEdit置为true, 用来控制el-input标签是否展示，展示哪个。