在实际项目中,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);
}
},