我该叫什么好呢 2022-08-05 09:50 采纳率: 82.4%
浏览 64
已结题

vue+elementui el-tab-pane问题

购物平台项目,想要在前端el-tab-pane切换不同标签时根据数据库state字段加载不同数据,有点没头绪,希望各位家人帮忙看看。

问题相关代码,请勿粘贴截图

数据库

img


界面

img


前端部分代码

img


img


栓q各位

  • 写回答

1条回答 默认 最新

  • 雾里桃花 2022-08-05 09:57
    关注

    给tab绑定tab-click事件
    el-tab-pane中配置name名为数据库中state的状态

    <el-tabs v-model=‘activeName’ @tab-click=‘changeTab’>
      <el-tab-pane label="全部" nane=‘all’>xxx</el-tab-pane>
      <el-tab-pane label="待收货" nane=‘待收货’>待收货</el-tab-pane>
      <el-tab-pane label="已收货" nane=‘已收货’>已收货</el-tab-pane>
      <el-tab-pane label="待发货" nane=‘待发货’>待发货</el-tab-pane>
    </el-tabs>
    
    

    js中执行changeTab方法,在tab切换时重新调用load方法加载数据

    changeTab(name) {
      this.load()
    }
    
    

    load函数是你请求数据的方法,你只需要在请求参数中加一个 state: this.activeName就可以了

    load() {
      let params = {
        xxx: xxx,
        state: this.activeName
      }
    
      request.get('xxxxx', {
        xxx: xxx,
        state: this.activeName
      }).then( res => {})
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 8月13日
  • 已采纳回答 8月5日
  • 创建了问题 8月5日

悬赏问题

  • ¥15 Bibtex4Word 引用中文文献
  • ¥20 用opencv c/c++ 转换成灰度图,然后做一下直方图均衡,输出mp4文件
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题