如何把el-cascader选择后的值存进SessionStorage后还能再显示在el-cascader中

您可以在el-cascader的change事件中获取选择后的值，并将其存储在SessionStorage中，例如：

<el-cascader
  ...
  @change="handleCascaderChange"
></el-cascader>

...

methods: {
  handleCascaderChange(val) {
    sessionStorage.setItem('cascaderValue', JSON.stringify(val));
  }
}

然后，在页面加载时，可以从SessionStorage中读取存储的值，并将其设置回el-cascader中，例如：

mounted() {
  const cascaderValue = sessionStorage.getItem('cascaderValue');
  if (cascaderValue) {
    this.$refs.cascader.setValue(JSON.parse(cascaderValue));
  }
}

这样就可以将之前选择的值重新显示在el-cascader中了。

相关问题

el-table 如何在多选如何在分页里面保存选中状态

在Vue.js的Element UI库中，`el-table`组件用于展示数据表格并支持丰富的功能，包括分页和多选。如果需要在分页切换时保持选择的状态，可以借助`keep-alive`或`sessionStorage`等机制来保存选中信息。

以下是基本步骤：

1. **数据管理**:
- 使用`v-model`绑定一个数组，存储用户的选择项，例如`selectedItems`。

   <template>
     <el-pagination :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
     <el-table :data="tableData" v-model="selectedItems">
       <!-- 表格列 -->
     </el-table>
   </template>

   <script>
   export default {
     data() {
       return {
         currentPage: 1,
         tableData: [], // 这里假设已经加载了分页数据
         selectedItems: [] // 保存选择的数据项
       };
     },
     methods: {
       handlePageChange(page) {
         this.currentPage = page; // 更新当前页
         // 如果有分页策略，记得同步数据
         this.getTableData(page); // 获取新的数据
       }
     },
   };
   </script>

2. **处理分页数据获取**:
- `getTableData(page)`函数应该从服务器或缓存中获取对应页数的数据，并确保将用户的已选数据更新到新数据上。

3. **持久化选择**:
- 使用`keep-alive`时，可以在路由守卫（如`beforeRouteUpdate`）中保存和恢复选中状态。
- 或者，在`beforeDestroy`生命周期钩子中，使用`sessionStorage`或本地存储（localStorage、vuex等）将选中状态序列化存储。

// 使用 keep-alive 和生命周期钩子
<template>
  <keep-alive>
    <router-view :key="viewKey"></router-view>
  </keep-alive>
</template>

<script>
export default {
  beforeDestroy() {
    // 使用 sessionStorage 存储选中状态
    localStorage.setItem('selectedItems', JSON.stringify(this.selectedItems));
  },
  created() {
    const storedItems = localStorage.getItem('selectedItems');
    if (storedItems) {
      this.selectedItems = JSON.parse(storedItems);
    }
  },
};
</script>

请注意，这种方式仅适用于单页应用（SPA）。如果是传统的服务器渲染应用，那么你需要在后端处理这个状态保存的问题。

el-menu刷新保持选中状态

在vue.js框架中，使用element-ui组件库的el-menu菜单时，如果需要保持菜单选项在页面刷新后的选中状态，可以使用localStorage或sessionStorage存储用户选择的菜单选项，然后在组件的mounted钩子函数中读取存储的菜单选项状态并设置为当前选中项。具体实现步骤如下：

1. 在菜单组件中设置menu-item的index属性为选项的唯一标识，例如：

<template>
<el-menu class="menu" :default-active="activeIndex" @select="handleSelect">
<el-submenu index="1">
<template slot="title"><i class="el-icon-location"></i>导航一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
</el-submenu>
</el-menu>
</template>

2. 在菜单组件中定义选项选中的处理函数handleSelect，将选中的index存储到localStorage（或sessionStorage）中：

methods:{
handleSelect(index,indexPath) {
localStorage.setItem('activeIndex',index);
this.activeIndex = index;
console.log('activeIndex:',localStorage.getItem('activeIndex'));
}
}

3. 在组件的mounted钩子函数中读取localStorage中存储的选项状态，并设置为当前选中项：

mounted() {
var index = localStorage.getItem('activeIndex');
if(index){
this.activeIndex = index;
}
}
4. 最后，在每次页面刷新时，选中的菜单选项就可以被恢复，保持了选中状态。