el-tabs如何通过点击,发对应请求,示例代码
时间: 2024-03-11 12:50:03 浏览: 106
手动动态改变el-tabs标签页顺序
el-tabs 是 ElementUI 中的一个组件,可以实现选项卡切换的效果。要实现通过点击选项卡触发请求,可以通过监听 el-tabs 的 tab-click 事件来实现。以下是一个示例代码:
```vue
<template>
<div>
<el-tabs @tab-click="handleTabClick">
<el-tab-pane label="选项卡1">选项卡1的内容</el-tab-pane>
<el-tab-pane label="选项卡2">选项卡2的内容</el-tab-pane>
<el-tab-pane label="选项卡3">选项卡3的内容</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
methods: {
handleTabClick(tab) {
// 根据点击的选项卡触发不同的请求
if (tab.label === '选项卡1') {
// 发送选项卡1对应的请求
} else if (tab.label === '选项卡2') {
// 发送选项卡2对应的请求
} else if (tab.label === '选项卡3') {
// 发送选项卡3对应的请求
}
}
}
}
</script>
```
在上面的代码中,我们监听了 el-tabs 的 tab-click 事件,在事件处理函数中根据点击的选项卡的 label 属性来判断应该触发哪个请求。你可以将发送请求的代码放到对应分支中实现。
阅读全文