vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

一、TableTreeLevel组件 

<template>
      <div class='main'>
            <div class="btns">
                  <el-button type="primary" @click="expandLevel(1)">展开一级</el-button>
                  <el-button type="primary" @click="expandLevel(2)">展开二级</el-button>
                  <el-button type="primary" @click="expandLevel(3)">展开三级</el-button>
                  <el-button type="primary" @click="expandLevel(4)">展开四级</el-button>
                  <el-button type="warning" @click="putAwayLevel(0)">全部收起</el-button>
            </div>
            <div>
                  <el-table ref="multipleTableRef" :height="height" :default-expand-all=
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3,可以通过使用`keep-alive`组件来缓存动态组件的状态。当使用`keep-alive`包裹一个组件时,该组件将不被销毁,而是被缓存起来。当该组件再次被渲染时,它将从缓存恢复,而不是重新创建。这可以帮助我们在组件之间切换时保留数据。 对于ElementUI的`el-tabs`组件,我们可以将每个标签页对应的组件包裹在`keep-alive`,以便在切换标签时缓存组件的状态。以下是一个示例: ```vue <template> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1" name="tab1"> <keep-alive> <component :is="currentTab.component"></component> </keep-alive> </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> <keep-alive> <component :is="currentTab.component"></component> </keep-alive> </el-tab-pane> </el-tabs> </template> <script lang="ts"> import { defineComponent } from 'vue'; import Tab1 from './Tab1.vue'; import Tab2 from './Tab2.vue'; export default defineComponent({ components: { Tab1, Tab2, }, data() { return { activeTab: 'tab1', tabs: [ { label: 'Tab 1', name: 'tab1', component: Tab1 }, { label: 'Tab 2', name: 'tab2', component: Tab2 }, ], }; }, computed: { currentTab() { return this.tabs.find((tab) => tab.name === this.activeTab); }, }, }); </script> ``` 在上面的示例,我们使用了一个`tabs`数组来存储每个标签页的信息,包括标签页的名称、标签页的标签文本和对应的组件。通过计算属性`currentTab`,我们可以获取当前选的标签页对应的组件。在`el-tab-pane`,我们将该组件包裹在`keep-alive`,以便在切换标签时缓存组件的状态。 需要注意的是,如果标签页的组件有自己的状态,我们需要确保在组件被销毁前将其保存下来,以便在组件被恢复时能够重新渲染出正确的状态。可以通过在组件的`beforeUnmount`钩子保存状态,在组件的`activated`钩子恢复状态来实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值