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

今天写了类似视频选集的功能。需求看图：

只提供一个作品的个数，通过这个数字动态生成以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>
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、:label="calnumFirst(item)+'-'+calnumEnd(item)" 渲染的是选项卡标签里的东西；v-for="(val,index) in numarr().slice((calnumFirst(item)-1),calnumEnd(item))" 是渲染选项卡具体集数，通过slice截取数组的不同长度，显示不同的集数。
（numarr()这个是我把143这个数字从0~142都放了进一个数组里并返回这个数组，很笨的方法）

3、calnumFirst(item)、calnumEnd(item) 这两个方法分别用来计算起始数字、终止数字，就比如说1~20，前者计算1，后者计算得到20.

4、两个变量 num、wei 是在实例渲染完成后，通过获取的数据计算出来的。num代表总集数，wei是选项卡标签的数量。

完整代码如下：

<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>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: 'second',
                wei: 0,
                num: 0,
            };
        },
        computed: {
            introDetail() {
                let arr = this.$store.state.comicStore.comicMainData.data.comicItems;
                let param = this.$route.query.name;
                let arrOk = '没有数据';
                arr.forEach(item => {
                    if (item.name == param) arrOk = item;
                });
                return arrOk;//对象
            },
        },
        mounted() {
            this.num = this.introDetail.episodeNum;
            this.wei = Math.ceil(this.num / 20);
        },
        methods: {
            newRouterTo(routerPath, query) {
                this.$router.push({ path: routerPath, query: query });
                // this.$router.push({name: routerName, params: param});
            },
            handleClick(tab, event) {
                this.$refs.ref_detail_num.style.height="3.06rem";
                console.log(this.$refs.el_span)
            },
            calnumFirst(index) {
                return ((index - 1) * 20 + 1);
            },
            calnumEnd(index) {
                if (index === this.wei) {
                    return this.num;
                } else {
                    return ((index - 1) * 20 + 20);
                }
            },
            numarr(){
                let arr=[];
                for(let i=1;i<=this.num;i++){
                    arr.push(i);
                }
                return arr;
            }
        },
    }
</script>

<style scoped>
    .comic_detail_num {
        padding-left: 0.15rem;
    }

    .comic_detail_num .num_top {
        height: .4rem;
        line-height: .4rem;
        padding-right: .15rem;
    }

    .comic_detail_num .num_top span {
        font-size: .14rem;
        color: #FF5267;
        margin-right: .175rem;
    }
    .comic_detail_num .num_click {
        min-height: 2.42rem;       
    }
    .comic_detail_num .num_click ul{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .comic_detail_num .num_click li {
        color: #5a5a5a;
        border: .01rem solid #F9F9F9;
        width: .6rem;
        height: .53rem;
        margin-bottom: .06rem;
        background: #F9F9F9;
        text-align: center;
        line-height: .53rem;
        font-size: .14rem;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111