在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>
GitHub 加速计划 / eleme / element
14
2
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐