ElementUI中el-tabs自定义标题无法双向绑定

最新推荐文章于 2024-09-06 14:22:25 发布

zqian1994

最新推荐文章于 2024-09-06 14:22:25 发布

阅读量4.6k

点赞数 1

分类专栏： UI库 Vue

本文链接：https://blog.csdn.net/zqian1994/article/details/89339008

版权

Vue 同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

UI库

13 篇文章 0 订阅

订阅专栏

BUG说明：通过slot分发进行标签页自定义标题，在标签页内执行方法修改标签页名称后无法进行双向绑定。只有切换标签页后数据才会进行刷新。源代码如下：

	<el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane name="0" label="标签一">111</el-tab-pane>
      <el-tab-pane name="1">
      	// 自定义标题
        <template slot="label">
          <svg-icon icon-class="photo" class-name="collecting"/>
          <p>{{collectId}}</p>
        </template>
        {{collectId}}
        <el-button @click="collectId++">标题名称自增</el-button>
      </el-tab-pane>
    </el-tabs>

修改版：同时使用label和slot分发。

<el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane name="0" label="标签一">111</el-tab-pane>
      <el-tab-pane name="1" :label="collectId">
        <template slot="label">
          <svg-icon icon-class="photo" class-name="collecting"/>
          <p>{{collectId}}</p>
        </template>
        {{collectId}}
        <el-button @click="collectId++">标题名称自增</el-button>
      </el-tab-pane>
    </el-tabs>