可以通过设置el-tab-header中的editable属性为true来实现el-tab的name可编辑。怎么用
时间: 2023-06-04 13:02:02 浏览: 377
vue el-table实现行内编辑功能
5星 · 资源好评率100%
可以这样使用:
```html
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name">
<span slot="label">
<el-input v-model="item.name" :disabled="!item.editable" @blur="item.editable=false"></el-input>
<i class="el-icon-edit" v-if="item.editable" @click="item.editable=false"></i>
<i class="el-icon-circle-check" v-else @click="item.editable=true"></i>
</span>
<div>Tab内容 - {{item.name}}</div>
</el-tab-pane>
</el-tabs>
```
其中,tabs是一个数组,每个元素包含name和editable两个属性,分别代表tab的名称和是否可编辑。在label中使用el-input和两个icon来实现name可编辑和保存,同时使用disabled属性来控制输入框是否可编辑。
阅读全文