细节复盘5 （elementUI Tabs 标签页的应用示例&作品选集）2020-8-3

最新推荐文章于 2023-09-27 09:18:54 发布

原创

最新推荐文章于 2023-09-27 09:18:54 发布 · 969 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

今天写了类似视频选集的功能。需求看图：
在这里插入图片描述
只提供一个作品的个数，通过这个数字动态生成以20为间隔的选项卡标签；并且，点击标签，动态生成展示集数。
比如上面这个例子，给了集数参数值为143，生成了1-20、21-40等标签，点击标签，不同标签下展示的集数不同。
（样式的话，是刚开始折叠集数具体展示，等点击了，再展开）

1、用了ui框架，结构如下

<template>
    <div class="comic_detail_num" ref="ref_detail_num">
        <!-- 有几集选项卡  -->
        <div class="num_top">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane ref="el_span" :label="calnumFirst(item)+'-'+calnumEnd(item)" v-for="item in wei" :key="item">
                    <!-- 选项卡里面东西 -->
                    <div class="num_click">
                        <ul>
                            <li v-for="(val,index) in numarr().slice((calnumFirst(item)-1),calnumEnd(item))" :key="index" @click="newRouterTo('/Contentcomic',{index:item})">{
  
  {val}}</li>
                        </ul>
                    </div>
                </el-tab-pane>
            </el-tabs