element-plus e-tabs与pinia 一起使用的问题

问题描述

txt 复制代码
pinia中的数据更新了,页面还是旧数据

前端代码

html 复制代码
<template>
  <Layout>
    <section class="_main_">
      <el-tabs editable closable v-model="activeTabName"  type="card">
        <template #add-icon>
          <el-button type="primary" @click="handleAddTab">新增</el-button>
          <el-button type="primary" @click="handleAddTab">绑定</el-button>
        </template>
        <template v-if="tabs.length">
          <el-tab-pane v-for="item in tabs" :key="item.id" :name="item.id">
            <template #label>
              <div class="tab-label">
                <span>{{ item.title }}</span>
                <el-icon @click="removeTab(item.id)"><Close /></el-icon>
              </div>
            </template>
            <component :is="TabContent" v-bind="item" />
          </el-tab-pane>
        </template>
        <el-tab-pane name="default" v-else>
          <template #label>
            <div class="tab-label">
              <span>item</span>
            </div>
          </template>
          <TabContent />
        </el-tab-pane>
      </el-tabs>
    </section>
  </Layout>
</template>

<script lang="ts" setup>
import Layout from "@/layout/index.vue";
import { useTabsStore } from "@/store";
import TabContent from "./components/tabContent/index.vue";
const store = useTabsStore();
const { addTab, removeTab } = store;
const { tabs, activeTabName } = storeToRefs(store);

watchEffect(() => {
  console.log(`activeTabName ==>`, activeTabName.value);
});
const handleAddTab = () => {
  const index = tabs.value.length + 1;
  addTab({ title: `${index}` });
};

</script>

pinia

typescript 复制代码
import { defineStore } from "pinia";
import { v4 as uuid } from "uuid";
type IState = {
  activeTabName: string;
  tabs: {
    title: string;
    id: string;
  }[];
};

const defaultActiveTabName = "default";

const state = reactive<IState>({
  activeTabName: defaultActiveTabName,
  tabs: [],
});

export const useTabsStore = defineStore("tabs", {
  state: () => state,
  actions: {
    /**
     * 新增tab标签页
     */
    addTab(tab: Partial<IState["tabs"][number]>) {
      const id = uuid();
      this.tabs.push({ title: tab.title!, id });
      this.activeTabName = id;
    },
    /**
     * 删除tab标签页
     */
    removeTab(id: string) {
      const index = this.tabs.findIndex((i) => i.id == id);
      this.tabs.splice(index, 1);

      requestAnimationFrame(() => {
        // 更新逻辑
        if (!this.tabs.length) {
          this.activeTabName = defaultActiveTabName;
          return;
        }

        // 判断是否有 activeTabName 绑定的值
        const hasActiveTabName =
          this.tabs.findIndex((i) => i.id == this.activeTabName) >= 0;
        if (!hasActiveTabName) {
          this.activeTabName = this.tabs[this.tabs.length - 1].id;
        }
      });
    },
  },
});

实现方案

typescript 复制代码
...
   /**
     * 删除tab标签页
     */
    removeTab(id: string) {
      const index = this.tabs.findIndex((i) => i.id == id);
      this.tabs.splice(index, 1);

      requestAnimationFrame(() => {
        // 更新逻辑
        if (!this.tabs.length) {
          this.activeTabName = defaultActiveTabName;
          return;
        }

        // 判断是否有 activeTabName 绑定的值
        const hasActiveTabName =
          this.tabs.findIndex((i) => i.id == this.activeTabName) >= 0;
        if (!hasActiveTabName) {
          this.activeTabName = this.tabs[this.tabs.length - 1].id;
        }
      });
    },

使用 requestAnimationFrame可以解决(setTimeout也行,只是有瞬间白屏)

ok ,解决

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体