el-tabs双击可编辑标签名称

最新推荐文章于 2024-04-12 09:30:00 发布

原创最新推荐文章于 2024-04-12 09:30:00 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

文章展示了如何在Vue.js应用中使用el-tabs组件创建卡片式标签页，并实现双击编辑标签标题的功能。通过v-model、v-for指令和自定义事件处理函数，动态更新标签内容，并在输入框失去焦点时自动保存修改。

该文章已生成可运行项目，

  <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit"
                                tab-position="bottom" style="height: 100%;" class="renderTabs"
                                @keydown.native.capture.stop.self>
                                <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title"
                                    :name="item.name" style="height: 100%;">
                                    <!-- 在这里实现  双击可编辑tabs  标签 -->
                                    <template slot="label">
                                        <span v-if="!item.inputFlag"
                                            style="display: inline-block;width: 88px;text-align: center;"
                                            @dblclick="tabsContent(item,item.name)">
                                            {{item.title}}
                                        </span>
                                        <input v-else-if="!!item.inputFlag" :ref="`myInput${item.name}`"
                                            v-model="item.title" type="text" class="tabsInput"
                                            @blur="item.inputFlag=false" />
                                        <!-- <el-input type="text" name="hiddenText" style="display: none;" /> -->
                              </template>
    </el-tab-pane>

html

    //tabs的双击可编辑   //双击表格可编辑存在input框问题(2023-04-19)
            tabsContent(val, index) {
                // console.info(val, index, '双击编辑tabs')
                val.inputFlag = true

                // this.$nextTick(() => {
                // console.info(this.$refs[`myInput${index}`])
                // window.dragThis.$refs[`myInput${index}`][0].focus()
                // });

            },

   editableTabs: [
                    {
                        title: '模板(一)',
                        name: '1',
                        inputFlag: false,
                        content: 'Tab 1 content'
                    },
                    {
                        title: '模板(二)',
                        name: '2',
                        inputFlag: false,
                        content: 'Tab 2 content'
                    }
                    ,
                    {
                        title: '模板(三)',
                        name: '3',
                        inputFlag: false,
                        content: 'Tab 3 content'
                    }
                ],

data

本文章已经生成可运行项目