基础篇（三）：element ui中的slot有什么作用？（举例：tab+badge）

本文主要是介绍基础篇（三）：element ui中的slot有什么作用？（举例：tab+badge），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在element中我们经常使用到了slot（插槽），现在就来说说他的具体使用方法和使用意义。Go~
以下是一段渲染标签页的代码：

<el-tabsv-model="activeName"@tab-click="handleClick"type="card"><el-tab-panev-for="item in tabChange":label="item.label":name="item.num"></el-tab-pane></el-tabs>

其中tabChange里面的数据格式是这样的：

   tabChange: [{ num: "second", numed: 1, label: "待审核", count: "1" },  //待审核{ num: "third", numed: 2, label: "待分派", count: "1" },   //待分派{ num: "fourth", numed: 3, label: "待维修", count: "" },  //待维修{ num: "fifth", numed: 4, label: "待稽核", count: "" },   //待稽核]

然后渲染成这个样子：
在这里插入图片描述

现在我们需要把tabChange中的count里面的数字作为数量标识符放到tab里面，并且使用element中的el-badge来写，那么如何插入count来渲染成下图的结果??
在这里插入图片描述

然后我们知道tab里面的label是一个展示内容用的东西，那么我们直接写成这样：

     <el-tabsv-model="activeName"@tab-click="handleClick"type="card"><el-tab-panev-for="item in tabChange":name="item.num"><template slot="label">  //看这里！这里使用了slot插入label。注意：并非必须要用template来插入的<span>{{item.label}}</span><el-badge:value="item.count"size="mini"class="item"></el-badge></template></el-tab-pane></el-tabs>