写bug小白 2023-04-18 17:17 采纳率: 95.5%
浏览 52
已结题

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

如何实现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>


  • 写回答

2条回答 默认 最新

  • 乘风xs 2023-04-18 17:48
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 应用商店如何检测在架应用内容是否违规?
  • ¥15 Ubuntu系统配置PX4
  • ¥20 MATLAB间接平差计算
  • ¥50 nw.js调用activex
  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题
  • ¥15 MAC虚拟机(win11)USB插上后无串口com,无法烧录
  • ¥15 代码问题:df = pd.read_excel('c:\User\18343\Desktop\wpsdata.xlxs')路径读不到
  • ¥50 基于ubuntu的Mamba配置环境失败问题