el-tabs搭配el-badge实现数量角标及可能遇到问题

努力搞米

已于 2024-05-07 18:10:22 修改

阅读量1.4k

点赞数 13

文章标签： vue.js javascript 前端

于 2024-04-29 17:57:53 首次发布

本文链接：https://blog.csdn.net/m0_58403721/article/details/135510296

版权

本文介绍了如何在实际项目中使用Vue的el-tabs组件与表格数据和数量角标配合，通过循环展示和接口请求策略，以及解决数据渲染不及时的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际项目中，table数据展示肯定是会有的，有table就有可能会有tabs的需求，有了tabs就可能会有数量角标的需求，所以就要把他们三者结合在一块，实现完美配合，更新及时。

<el-tabs v-model="activeName" @tab-click="handleTabsClick">
            <el-tab-pane v-for="item in tabsArr" :key="item.value" :name="item.value">
                <template slot="label">
                    {{ $t(item.label) }}
                    <el-badge v-if="item.count > 0" :value="item.count" size="mini"></el-badge>
                </template>
                <!-- 表格组件 -->
                <publicTable ref="childTable" :data="tableData" :columns="tableColumns" showHandle :showImage="showImage"
                    v-loading="loading" :imagePropertyName="pictureName" :imageName="imageName">
                    <template slot-scope="{ item }">
                        <el-button @click="handleDetails(item)" type="text" size="small"
                            {{ $t('returnGoods.details') }}
                        </el-button>
                    </template>
                </publicTable>
                <!-- 分页 -->
                <pagination v-show="total > 0" :total="total" :page.sync="pageParams.pageNum"
                    :limit.sync="pageParams.pageSize" @pagination="getList" />
            </el-tab-pane>
        </el-tabs>

el-tabs组件带有一个label插槽，这样就可以把数量角标放在插槽里面和label结合，实现table+tabs+badge的效果

我是把tabs整体拿出来作为一个数组，展示用循环来进行，项目原因最开始没有把tabs和table数据放在一块，分开来的。从后端获取数据也是两个接口，table数据是一个，角标数量是一个，所以每次刷新就需要请求两个接口。大家如果是一个接口返回，则处理一下数据即可

tabsArr: [
                { label: "returnGoods.Pending", value: "0", show: true },
                { label: "changeAddress.submitted", value: "1", show: true },
                { label: "urge.supplementaryInfo", value: "2", show: true },
                { label: "operation.succeed", value: "3", show: true },
                { label: "operlog.fail", value: "4", show: true },
            ],

请求角标数量的接口可能会遇到问题，因为每次切换都会调用，角标就会有可能数据渲染不及时，用$set来解决，具体可看下方代码

async getunHandled() {
            try {
                const data = await Apis.unHandled() // 调用未处理条数接口
                this.tabsArr.forEach((tab, index) => {
                    // 获取 obj 中与当前 tab 的 value 对应的值
                    let countValue = data.data[tab.value];
                    if (countValue === undefined) {
                        countValue = '0'
                    }
                    // 将 countValue 插入到当前 tab 中的 count 属性
                    // 扩展运算符...，复制原始选项卡对象 tab 的所有属性，并添加了一个新的属性count，
                    // 其值为 countValue。这确保了我们在更新选项卡时不会丢失原始的属性。
                    this.$set(this.tabsArr, index, { ...tab, count: countValue }); // 数据渲染不及时，$set解决
                });
            } catch (error) {
                console.log(error);
            }
        },