vue tab實現右定位


呈現效果

 

 

利用v-if進行判斷,登頁面完全加載完畢后,顯示tab頁,

利用name標簽,實現選擇哪個tab

 

<template>

  <el-tabs v-if="display"  v-model="dateActive"   @tab-click="handleClick">

    <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>

    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

    <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>

  </el-tabs>

</template>

<script>

import { getPlan } from '@/api/index'

export default {

  data() {

   return {

     editDateTabs: [],

     display: false,

     };

    },

  created() {

    this.loadData()

  },

  methods: {

   loadData() {

     getPlan().then(response => {

       that.editDateTabs = response.data

       this.dateActive = that.editDateTabs[3].name

       this.display = true
      })

    }

  }

 

};

</script>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM