如何实现el-tabs标签页的可编辑功能

Question

如何实现el-tabs标签页的可编辑功能？

目标是实现el-tabs标签页的标题可以修改；

目前我的思路是给el-tab-pane元素添加一个input输入框，点击时触发选择框，鼠标移开时保存输入文字，但不知道代码该如何写；点击保存后如何把修改后的标题渲染到页面上

这是我已有的代码，展示了el-tabs标签页

框架语言是vue+JS，使用了Element组件库；
tableList是要渲染的内容数组，格式如下：

tableList:[
  {  
    name:'title1',
    content:[
        {  
            name:'title1',
            value: 1                 
        },{  
            name:'title1',
            value: 1                 
        },{  
            name:'title1',
            value: 1                 
        }
      },
       {  
    name:'title2',
    content:[
        {  
            name:'title2',
            value: 2                 
        },{  
            name:'title2',
            value: 2                
        },{  
            name:'title2',
            value: 2               
        }
      }
    ]
]

代码

<el-tabs type="card" v-model="defaultValue" :before-leave="beforeLeave" closable  @tab-remove="removeTab">
      <el-tab-pane v-for="item in tableList" :name="item.name" :label="item.name">
        { item.name}}
          <el-input v-else v-model="item.name" :placeholder="'原标题名'+'--'+`${item.name}`"></el-input>    
          
         -->
        <span slot="label" :contenteditable="contenteditable">
          {{ item.name }}
          <el-button type="text" v-on:click="handleEdit"><i :class="contenteditable ? 'el-icon-check' : 'el-icon-edit'" ></i></el-button>
        </span>
        <el-row :gutter="20">
          <vuedraggable
            v-model="item.value"
            handle=".dargBtn"
            @end="end"
            :move="onMove"
            :options="{animation:800}"
          >
          <el-col :span="6" 
            v-for="obj in item.content" 
            :key="obj.id"
            class="preViewCard">
            <el-card :body-style="{ padding: '0px' }">
              <div class="preViewDiv dargBtn">
                <div class="demo-image__preview">
                   <span>{{obj.value}}</span>
                </div>
            
                <el-button-group class="button" v-if="isEdit">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    style="width: 50%"
                    @click="handleUpdate(obj)"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    style="width: 50%"
                    icon="el-icon-delete"
                    @click="handleDelete(obj)"
                  ></el-button>
                </el-button-group>
              </div>
            </el-card>
          </el-col>
        </vuedraggable>
        </el-row>
      </el-tab-pane>
    </el-tabs>

Answer 1

你的思路很正确，在handleEdit切换显示input， 然后给input绑定一个onblur事件，在onblur事件的回调中，切换显示tab标题，并把input的值保存在tabList的相应的元素的name上面去