在element中我们经常使用到了slot(插槽),现在就来说说他的具体使用方法和使用意义。Go~
以下是一段渲染标签页的代码:
<el-tabs
v-model="activeName"
@tab-click="handleClick"
type="card"
>
<el-tab-pane
v-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-tabs
v-model="activeName"
@tab-click="handleClick"
type="card"
>
<el-tab-pane
v-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>