vue+element-ui,父页面是二级列表，子页面里面有提交功能，怎样实现提交之后回到父页面，二级列表还保持着下拉状态

vue+element-ui,父页面是二级列表，子页面里面有提交功能，怎样实现提交之后回到父页面，二级列表还保持着下拉状态。

页面展示
父页面

img

子页面 目前的问题是：提交之后回到子页面，子页面无法保持着之前的二级表格下拉展示状态

img

代码展示
子页面

img

父页面
表格代码

img

获取列表代码

img

要实现提交后回到父页面，并且保持二级列表的下拉状态，你可以在返回父页面时，将当前的下拉状态保存下来，并在返回时重新设置它。

首先，在父页面中，传递一个参数给子页面，用于保存下拉状态。你可以在路由中定义一个参数，或者通过props传递给子页面。


html
<!-- 在父页面中 -->
<router-link :to="{ path: '/子页面路径', query: { dropdownState: dropdownState }}"></router-link>
上面的代码中，dropdownState 是一个变量，用于保存下拉状态。

然后，在子页面中，获取并保存下拉状态。


javascript
// 在子页面中
mounted() {
  this.dropdownState = this.$route.query.dropdownState; // 获取下拉状态
},
接着，在子页面提交成功后，回到父页面时，将下拉状态作为参数传递给父页面。

javascript
// 在子页面中
submitForm() {
  // 提交逻辑
  this.$router.push({ path: '/父页面路径', query: { dropdownState: this.dropdownState }});
}

最后，在父页面中，接收传递过来的下拉状态参数，并在需要展开下拉时设置它。


javascript
// 在父页面中
mounted() {
  this.dropdownState = this.$route.query.dropdownState; // 获取传递过来的下拉状态
},
methods: {
  expandDropdown() {
    // 展开下拉逻辑

    // 在展开下拉时，根据传递过来的下拉状态设置它
    if (this.dropdownState) {
      // 设置下拉状态
      // 例如，使用 element-ui 的组件，可以使用 ref 获取到下拉组件，并设置展开状态
      this.$refs.dropdownRef.show();
    }
  }
}

通过以上方式，你可以在提交后回到父页面时，保持二级列表的下拉状态。根据实际情况，需要调整代码中的路径和组件引用名称。

可以参考下我的想法

  1. 在父页面的二级列表中，绑定一个 v-model 变量来保存下拉状态，例如：
<el-select v-model="selectedItem">
  <el-option v-for="item in items" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>

其中 selectedItem 就是用来保存当前选中的下拉项的变量。

  1. 在子页面中，当提交成功后，可以通过 this.$router.push 方法将页面跳转回父页面，同时在 URL 中添加一个参数来标记是否需要保持下拉状态：
this.$router.push({
  path: '/parent',
  query: {
    keepDropdown: true
  }
})

其中 keepDropdown 是自定义的参数名。

  1. 在父页面的 mounted 钩子函数中，可以获取 URL 中的参数，如果存在 keepDropdown 参数，则将保存的下拉状态恢复：
mounted() {
  const keepDropdown = this.$route.query.keepDropdown
  if (keepDropdown) {
    // 恢复下拉状态
    this.selectedItem = this.items.find(item => item.id === keepDropdown)
  }
}

可以给父页嵌套keeplive加入缓存

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7643138
  • 这篇博客也不错, 你可以看下前端学习之vue+element-ui电商项目（一）登录界面+主页面
  • 除此之外, 这篇博客: 【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面中的 3.4.4 设置背景颜色并在屏幕中央绘制登录盒子 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    1. 在可视化工具中安装 开发依赖 less 和 less-loader
    2. 安装过依赖后要重新编译
    3. 设置全局样式 ./assets/css/global.css
    /* 全局样式表 */
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1366px;
}
    1. 入口文件导入全局css文件 ./main.js
    // 导入全局样式表
import './assets/css/global.css'
    1. 设置背景颜色并在屏幕中央绘制登录盒子 Login.vue
    <div class="login_container">
  <div class="login_box"></div>
</div>

    .login_container {
  background-color: #409eff;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
  • 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇课程中的 使用element完善系统登录界面设计小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    问题：请问您是在使用Vue和Element UI开发一个页面，其中父页面是一个二级列表，子页面中有一个提交功能。您想实现的功能是，在提交后返回到父页面时，保持二级列表的下拉状态不变。目前的问题是，子页面提交后返回子页面时，二级列表的下拉状态无法保持。您希望如何优化这个问题呢？

    回答：为了实现子页面提交后返回父页面时保持二级列表的下拉状态不变，我们可以采用以下步骤进行优化：

    1. 确保父页面的二级列表数据在父组件的data属性中定义，例如：
    data() {
  return {
    secondLevelList: [], // 二级列表数据
  }
}
    1. 在父组件的模板中使用Element UI的下拉菜单组件el-dropdown来展示二级列表，例如：
    <el-dropdown>
  <span class="el-dropdown-link">请选择</span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item v-for="item in secondLevelList" :key="item.id">{{ item.name }}</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
    1. 在子页面中，利用Vue的路由钩子函数beforeRouteLeave，在离开当前页面时保存当前下拉菜单的状态，并将状态存储在localStorage或者Vuex中。例如：
    import Vue from 'vue'
import { mapState } from 'vuex'

export default {
  beforeRouteLeave(to, from, next) {
    // 保存下拉菜单的状态
    const dropdownState = this.$refs.dropdown.isActive ? 'active' : 'inactive'
    Vue.localStorage.set('dropdownState', dropdownState)

    next()
  },
  computed: {
    ...mapState({
      dropdownState: state => state.dropdown.dropdownState
    })
  }
}
    1. 在父页面的created钩子函数中，通过localStorage或Vuex获取保存的下拉菜单状态，使得在返回父页面时，下拉菜单的状态保持一致。例如：
    created() {
  const dropdownState = Vue.localStorage.get('dropdownState')
  if (dropdownState === 'active') {
    // 打开下拉菜单
    this.$refs.dropdown.show()
  } else {
    // 关闭下拉菜单
    this.$refs.dropdown.hide()
  }
}

    通过以上优化步骤，即可实现子页面提交后返回到父页面时，保持二级列表的下拉状态不变的功能。

    请注意，以上代码示例中的下拉菜单组件和数据存储方式仅为示例，实际使用时，请替换为您项目中所使用的组件和数据存储方式。

<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      :expand-row-keys="expandRowKeys"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      expandRowKeys: ['12987123']
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

上面是官网给出的例子，通过row-key和default-expand-all可以默认展开行，可以记录展开行，跳转时保存起来，返回页面再展开

img