el-tab使用
Tabs标签页
el-tabs标签用于分割内容上有关联但属于不同类别的数据集合，选择不同的标签页时显示不同的内容。
代码
<script>
const getSubCategory = async () => {
//获取后端传的数据
const res = await getSubCategoryAPI(requestData.value)
goodList.value = res.data.result.items
}
onMounted(() => getSubCategory())
// tab切换回调
const tabChange = () => {
// 重置page为1，切换tab时候重新从第一页请求数据
requestData.value.page = 1
getSubCategory()
}
</script>
<template>
<!-- v-model绑定sortField字段，当tab切换时，sortField字段会自动成对应的name值，即publishTime | orderNum | evaluateNum -->
<el-tabs v-model="requestData.sortField" @tab-change="tabChange">
<el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
<el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
<el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
</el-tabs>
</template>
实现效果
