vue列表跳转详情以后列表回显问题

最新推荐文章于 2023-11-27 16:49:55 发布

csstmg

最新推荐文章于 2023-11-27 16:49:55 发布

阅读量729

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/csstmg/article/details/108075316

版权

前端专栏收录该内容

171 篇文章 1 订阅

订阅专栏


在请求列表数据的时候把筛选条件放到路由里面
const data = {
        departmentId: this.onadvansearchList.departmentId || this.treeId || '', // 所属部门
        immediateSuperiorId: this.onadvansearchList.immediateSuperiorId || '', // 直属上级
        employeeNumber: this.onadvansearchList.employeeNumber || '', // 职工编号
        companyId: this.onadvansearchList.companyId || '', // 所属公司
        departureEndTime: this.onadvansearchList.departureEndTime || '', // 离职结束时间
        departureStartTime: this.onadvansearchList.departureStartTime || '', // 离职开始时间
        entryEndTime: this.onadvansearchList.entryEndTime || '', // 入职结束时间
        entryStartTime: this.onadvansearchList.entryStartTime || '', // 入职开始时间
        companyEmail: this.onadvansearchList.companyEmail || '', // 公司邮箱
        state: this.onadvansearchList.state == null ? '' : this.onadvansearchList.state, // 账户状态
        erpRoleId: this.onadvansearchList.erpRoleId || '', // ERP职位角色id
        workPhone: this.onadvansearchList.workPhone || '', // 工作手机号
        phoneNumber: this.onadvansearchList.phoneNumber || '', // 联系电话
        idNumber: this.onadvansearchList.idNumber || '', // 身份证号
        isReclassification: this.onadvansearchList.isReclassification === '' ? '' : this.onadvansearchList.isReclassification, // 是否重分类
        roleId: this.onadvansearchList.roleId || '', // 职位角色
        loginName: this.onadvansearchList.loginName || '', // 登录名
        position: this.onadvansearchList.position || '', // 职位
        name: this.serchval, // 姓名和工号
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: astatus || this.status, // 控制二级分类的 在职 离职
        isEmail: this.isEmail === null ? '' : this.isEmail// 邮箱查看 未配置 传 0
      }
      
      this.$router.push({ // 请求接口的时候路由存值
        path: '/example/staffhmc',
        query: data
      })

回退用 
this.$router.go(-1)

在页面mounted中取路由数据进行重新请求与赋值

if (this.aRoute(this.$route.query)) { // 根据路由信息重新请求
      this.onadvansearchList = this.$route.query
      this.treeId = this.$route.query.departmentId
      this.$set(this.onadvansearchList, 'data1', [this.$route.query.entryStartTime, this.$route.query.entryEndTime]) // 入职时间
      this.$set(this.onadvansearchList, 'departureTime', [this.$route.query.departureStartTime, this.$route.query.departureEndTime])// 离职时间
      this.status = this.$route.query.status // 控制二级分类的 在职 离职
      this.serchval = this.$route.query.name // 姓名搜索
      this.isEmail = this.$route.query.isEmail // 邮箱查看
      this.pageNum = Number(this.$route.query.pageNum)
      this.pageSize = Number(this.$route.query.pageSize)
      this.$emit('onthejobDeparture', this.$route.query.status) // 改变父-在职离职状态
      this.$nextTick(() => {
        this.$refs.advancedFilter.valuation(this.$route.query) // 改变子-筛选赋值
        this.listRoster()
      })
    } else {
      this.$nextTick(() => {
        this.listRoster()
      })
    }

分页遇到情况: 在mounted中赋值无法回显
对分页组件加:key=“pageNum”

<!-- 分页-->
    <BasePagination :key="pageNum" class="paging" :total="total" :page-num="pageNum" :page-size="pageSize" style="text-align: center" @sizeChange="sizeChange" @currentChange="currentChange" />