首页 > 技术文章 > element保存tabs的状态,以及初始化默认值的思路

chengqiang521 2021-12-22 09:13 原文

第一种,每次打开选项卡时,默认选中第一个

      <!-- 选项卡 -->
      <el-tabs  v-model="activeName" type="card" @tab-click="handleClick" >
              <el-tab-pane label="产品信息" name="first"> </el-tab-pane>
               <el-tab-pane label="产品图片" name="second"> </el-tab-pane>
      </el-tabs>

data中定义activeName,存在每次切换的状态

在编辑对话框弹出之前,this.activeName="first"

第二种,保留上一次打开选项卡的状态,重新请求里面的内容

      //判断打开的选项卡,请求对应的数据,
      console.log("对话框展开的内容"+this.activeName)
      if (this.activeName === "first") {
        //打开的是第一个选项卡
      } else if (this.activeName === "second") {
        //打开的是第二个选项卡
        //根据产品的ID,请求对应的图片地址数组
        await this.getImageByProductId()
      } else if (this.activeName ==="third") {
        //打开的是第三个选项卡
        //获取所有的文件信息
        await this.GetFileByProductId()
      }
      //展开对话框
      this.editProductDialogVisible = true

推荐阅读