【Vue】页签的常用写法

╰+攻爆jí腚メ 2024-03-25 21:00 20阅读 0赞

**目录**

一、el-tabs常用写法

二、vue使用el-tabs实现标签页（内存+vuex）

三、vue使用el-tabs实现标签页，切换标签页传值

--------------------

### 一、el-tabs常用写法 ###

<el-tabs v-model="tabName" type="card" :closable="closable" @tab-click="clickTab" @edit="handleTabsEdit">
          <el-tab-pane label="详情" name="first">
                <div><div/>
          </el-tab-pane>
          <el-tab-pane label="其他" name="second">
                <div><div/>
          </el-tab-pane>
        </el-tabs>
    
    
      data() {
        return {
          tabName: "first",
            }
        }

### 二、vue使用el-tabs实现标签页（内存+vuex） ###

[原文链接][Link 1]

这是一个组件，例如：pageTabs.vue（组件是可以做到独立监听路由变化的，所以不需要外部调用什么内部的方法，所以可以抽离成为一个组件），监听路由改变进行新增标签，以及el-tabs组件的切换，删除
    代码：
    
    <template>
      <div class="page-tabs-index">
        <el-tabs v-model="activeRoute" type="card" :closable="closable" @tab-click="clickTab" @edit="handleTabsEdit">
          <el-tab-pane
            :key="index"
            v-for="(item, index) in tabs"
            :label="item.title"
            :name="item.route"
          >
            <span slot="label" @click.middle="removeTabByMiddle(item.route)">{
       {item.title}}</span>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
        export default {
          data(){
            return{
              closable: false,
              activeRoute:'',
              tabs:[]
            }
          },
          methods:{
            // 增删tabs
            handleTabsEdit(targetName,action){
              // console.log('tab增删:',targetName,action);
              if(action === 'remove'){
                this.methods('removeTab',targetName);
                this.methods('checkClosable');
              }
            },
            // 鼠标中键删除
            removeTabByMiddle(route){
              if(this.closable){
                this.methods('removeTab',route);
                this.methods('checkClosable');
              }
            },
            // 点击tab,item是被选中的标签的vue实例
            clickTab(item){
              if(this.$route.name === item.name){
                return ;
              }
              // console.log('tab切换：', item.name);
              this.$router.push({name:item.name})
            },
            // 这里需要配合keep-alive的includeAPI，设置vuex的缓存list，以实现tab关闭后vue不缓存该页面
            // 加载tabs缓存
            loadTabs() {
              const pageTabs = sessionStorage.getItem('page-tabs');
              if (pageTabs) {
                this.tabs = JSON.parse(pageTabs);
              }
              this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));
            },
    
            // tab切换更新
            updateTabs() {
              const route = this.$route.name;
              const title = route;
              if(!route || route === 'index'){
                // 这里是处理layout中第一次加载会是null，后续由监听$route更新，(index路由是引导用的，不需要)
                // 而如果是当从没有tabs的页面跳转过来时，不走下面，将不会变更当前激活
                return;
              }
              // 新增
              if (!this.tabs.find(i => i.route === route)) {
                this.tabs.push({ route, title });
              }
              this.activeRoute = route;
              // this.$route.meta.keepAlive = true;
              // 缓存tabs
              sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));
              this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));
            },
    
            // 移除tab
            removeTab(route) {
              // 保存index
              let index = this.tabs.findIndex(i => i.route === route);
              this.tabs = this.tabs.filter(i => i.route !== route);
              this.$store.commit('setKeepAliveList',this.tabs.map(i=>i.route));
              // 如果删除的是当前的route
              if (this.activeRoute === route) {
                // 将当前激活route切换为刚才删除的后一个
                if (index > this.tabs.length-1 ) {
                  index -= 1 ;
                }
                this.activeRoute = this.tabs[index].route;
                // this.$route.meta.keepAlive = false;
                this.$router.push({ name: this.activeRoute });
              }
              // 缓存tabs
              sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs));
            },
    
            // 检查是否可以继续删除
            checkClosable() {
              this.closable = this.tabs.length > 1;
            }
          },
          created(){
              // this.lists = this.$store.state.other.houseList;
          },
          mounted(){
            this.loadTabs()
            this.updateTabs()
            this.checkClosable()
          },
          watch:{
            $route(){
              this.loadTabs()
              this.updateTabs()
              this.checkClosable()
            }
          }
        }
    </script>
    
    然后还需要创建一个vuex
    
    export default {
      name: 'pageTabs',
      state: {
          keepAliveList:[],
      },
      mutations: {
        setKeepAliveList (state, list) {
          state.keepAliveList = list
        }
      }
    }
    
    
    然后就去入口页面引入使用即可，例如App.vue
    
    <template>
      <div id="app" class="biggbox">
        <pageTabs></pageTabs>
        
        <transition>
          <router-view></router-view>
        </transition>
    
      </div>
    </template>
    
    
    还可以用keepAlive
    
    <keep-alive :include="keepAliveList">
       <router-view ></router-view>
     </keep-alive>

### 三、vue使用el-tabs实现标签页，切换标签页传值 ###

[原文链接][Link 2]

// pageTabs
    <template>
      <div class="page-tabs-index">
        <el-tabs v-model="activeRoute" type="card" :closable="closable" @tab-click="clickTab" @edit="handleTabsEdit">
          <el-tab-pane
            v-for="item in tabs"
            :key="item.route"
            :label="item.str"
            :name="item.route"
          >
            <span slot="label">{
       { item.str }}</span>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
    export default {
      name: 'PageTabs',
      data() {
        return {
          closable: false,
          activeRoute: '',
          tabs: []
        }
      },
      watch: {
        $route() {
          this.loadTabs()
          this.updateTabs()
          this.checkClosable()
        }
      },
      created() {},
      mounted() {
        this.loadTabs()
        this.updateTabs()
        this.checkClosable()
      },
      methods: {
        // 增删tabs
        handleTabsEdit(targetName, action) {
          if (action === 'remove') {
            this.removeTab(targetName)
            this.checkClosable()
          }
        },
    
        // 点击tab,item是被选中的标签的vue实例
        clickTab(item) {
          if (this.$route.route === this.tabs[item.index].route) {
            return
          }
    															// 页面传值
          this.$router.push({ name: this.tabs[item.index].route, query: this.tabs[item.index].id })
        },
    
        // 这里需要配合keep-alive的includeAPI，设置vuex的缓存list，以实现tab关闭后vue不缓存该页面
        // 加载tabs缓存
        loadTabs() {
          const pageTabs = sessionStorage.getItem('page-tabs')
          if (pageTabs) {
            this.tabs = JSON.parse(pageTabs)
          }
          this.$store.dispatch('tabs/setKeepAliveList', this.tabs.map(i => i.route))
        },
    
        // tab切换更新
        updateTabs() {
          const route = this.$route.name
          const num = this.$store.state.tabs.tabList.length - 1
          const str = this.$store.state.tabs.tabList[num].title
          const id = this.$store.state.tabs.tabList[num].index === '' ? '' : JSON.parse(this.$store.state.tabs.tabList[num].index)
    
          if (!route || route === 'index') {
            // 这里是处理layout中第一次加载会是null，后续由监听$route更新，(index路由是引导用的，不需要)
            // 而如果是当从没有tabs的页面跳转过来时，不走下面，将不会变更当前激活
            return
          }
    
          // 新增
          if (!this.tabs.find(i => i.route === route)) {
            this.tabs.push({ route, str, id })
          } else {
          	// 路由相同替换参数
            this.tabs.forEach(item => {
              if (item.route === route) {
                item.id = id
              }
            })
          }
    
          this.activeRoute = route
          // this.$route.meta.keepAlive = true;
          // 缓存tabs
          sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs))
          this.$store.dispatch('tabs/setKeepAliveList', this.tabs.map(i => i.route))
        },
    
        // 移除tab
        removeTab(route) {
          // 保存index
          let index = this.tabs.findIndex(i => i.route === route)
          this.tabs = this.tabs.filter(i => i.route !== route)
          this.$store.dispatch('tabs/setKeepAliveList', this.tabs.map(i => i.route))
    
          // 如果删除的是当前的route
          if (this.activeRoute === route) {
            // 将当前激活route切换为刚才删除的后一个
            if (index > this.tabs.length - 1) {
              index -= 1
            }
            this.activeRoute = this.tabs[index].route
            // this.$route.meta.keepAlive = false;
            											// 跳转页面保留参数
            this.$router.push({ name: this.activeRoute, query: this.tabs[index].id })
          }
          // 缓存tabs
          sessionStorage.setItem('page-tabs', JSON.stringify(this.tabs))
        },
    
        // 检查是否可以继续删除
        checkClosable() {
          this.closable = this.tabs.length > 1
        }
      }
    }

// router/index
    // 路由守卫
    router.afterEach((to, from) => {
      const ind = to.query === undefined ? '' : to.query
      // 处理一下要的参数，新增tab的时候用到
      $store.dispatch('tabs/steTabList', { title: to.meta.title, path: to.path, query: to.query, index: JSON.stringify(ind) })
    })

**有用请点赞，养成良好习惯！**

**疑问、交流、鼓励请留言！**

[Link 1]: https://blog.csdn.net/qq_44706619/article/details/116598879
[Link 2]: https://www.cnblogs.com/tingshengshiyu/p/14378049.html