前提:
使用步骤条的方式展示内容,在步骤条一的时候,展示el-tree的多选框内容,在步骤条二返回步骤条一的时候,想实现el-tree的数据回显。
实现效果:
实现步骤:
1.路由跳转的时候,增加keepAlive: true
{
path:'/test',
name:'test',
component: () => import('../views/test.vue'),
//存储缓存
meta: { title: "测试页面",keepAlive: true }
},
什么是keep-alive?
在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。
也就是说,keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 。也就是所谓的组件缓存。
2.在这个过程中还遇到一个问题:
控制el-tree组件显示与不显示的问题时,要使用v-show。
v-if与v-show的区别?
优化点:
点击步骤条进行跳转,不需要上一步下一步按钮的操作