问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如下vue页面，为什么进入该页面的时候，通过控制台查新，所有请求都发送了2次？

头像
swnuv
    3.9k789621511

    created方法执行了两次， 是不是跟项目中存在两个router-view有关
    我补充了home.vue与app.vue

    created() {
    alert(1)
    this.getUserList()
    this.getOrgTree()
  },

    home.vue

    <template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="left">
        <img src="../assets/imgs/shop.png" alt="" />
        <span>金融消费者权益保护管理系统</span>
      </div>
      <div class="right">
        <span>欢迎您：{{ userInfo.userName }}</span>
        <el-badge style="margin-right:26px" :value="total" class="item">
           <i style="width:20px;height:20px" value class="todo-icon el-icon-bell"></i>
        </el-badge>
        <el-button type="danger" size="mini" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container style="overflow-y:hidden;">
      <!-- 侧边栏 -->
      <el-aside class="menu-aside" :width="isCollapse ? '64px' : '210px'" style="background:#02213e">
        <!-- 侧边栏菜单 -->
        <el-menu active-text-color="#409Eff" background-color="#02213e" text-color="#fff" :default-active="$route.path" unique-opened router :collapse="isCollapse" :collapse-transition="false">
          <!-- 第一层,item.menuName消保审查 -->
          <el-submenu class="menu-list" :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <!-- 第一层标题 -->
            <template slot="title">
              <span>{{ item.menuName }}</span>
            </template>
            <!-- 第二层-页面，subItem.menuName 流程审核-->
            <template v-for="subItem in item.childList">
              <el-menu-item :index="subItem.menuUrl" :key="subItem.id" v-if="subItem.menuUrl != '1'">
                <!-- <i class="el-icon-menu"></i> -->
                {{ subItem.menuName }}
              </el-menu-item>
            </template>
            <!-- 第二层-合并 -->
            <template v-for="subItem in item.childList">
              <el-submenu :index="subItem.id+''" :key="subItem.id" v-if="subItem.menuUrl == '1'">
                <!-- 第二层标题 -->
                <template slot="title">{{ subItem.menuName }}</template>
                <!--  第三层,subItem.childList是个数组，three是数组中的一个对象-->
                <template v-for="three in subItem.childList">
                    <!-- 第三层-页面 -->
                    <el-menu-item :index="three.menuUrl" :key="three.id" v-if="three.menuUrl != '1'">
                      {{ three.menuName }}
                    </el-menu-item>
                    <!-- 第三层-合并-->
                    <el-submenu :index="three.id+''" :key="three.id" v-if="three.menuUrl == '1'">
                      <template slot="title">{{ three.menuName }}</template>
                      <!-- 第四层 four是数组中的一个对象-->
                      <template v-for="four in three.childList">
                        <el-menu-item :index="four.menuUrl" :key="four.id" v-if="four.menuUrl != '1'">
                          {{ four.menuName }}
                        </el-menu-item>
                        <!-- <el-submenu :index="four.menuUrl" :key="four.id" v-if="four.menuUrl == '1'">
                          <template slot="title">{{ four.menuName }}</template>
                        </el-submenu> -->
                      </template>
                    </el-submenu>
                </template>
              </el-submenu>
            </template>
          </el-submenu>
        </el-menu>
        <!-- 切换菜单的折叠和显示 -->
        <div class="toggle-button" @click="isCollapse = !isCollapse">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" class="isCollapseIcon"></i>
        </div>
      </el-aside>
      <!-- 主体 -->
      <el-main class="building">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息对象
      userInfo: null,
      // 左侧菜单列表
      menuList: [],
      // 图标样式对象
      iconObj: {
        201: 'iconfont icon-shouye',
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
      },
      queryInfo:{
          businessCode:'',
          createName:'',
          businessName:'',
          startTime:'',
          endTime:'',
          pagenum: 1, // 页码
          pagesize: 5 // 页大小
        },
      // 是否折叠左侧的菜单
      isCollapse: false,
      total : ''
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    document.title = '金融消费者权益保护管理系统'
    this.getMenuList()
    // this.goToFlowPath(true)
  },
  methods: {
    // 退出
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          sessionStorage.clear()
           this.$router.push('/login')
          const { data: res } = this.$http.get('login/logout')
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
        })
        .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消退出",
          //   });
        })
    },
    // 消息提醒
    // async goToFlowPath(flag) {
    //   const { data: res } = await this.$http.post('syslog/getMessage', {
    //     id: this.userInfo.id,
    //   })
    //   if (res.code !== '1') {
    //     return this.$message.error(res.msg)
    //   }
    //   if (flag && res.obj.message != ''){
    //     this.$notify({
    //           title: '消息提醒',
    //           duration:3000,
    //           message: res.obj.message,
    //           position: 'bottom-right'
    //         })
    //         this.total = 1
    //   }
    //   if (!flag){
    //     this.$notify({
    //           title: '消息提醒',
    //           duration:3000,
    //           message: res.obj.message != '' ? res.obj.message : '暂无提醒',
    //           position: 'bottom-right'
    //         })
    //   }
    // },
    // 获取左侧的菜单列表
    async getMenuList() {
      const { data: res } = await this.$http.get('menu/getAllMenu')
      // console.log(res)
      if (res.code != '1') {
        return this.$message.error(res.msg)
      }
      this.menuList = res.obj.menuList
      var ifTrue= false
      if(this.menuList.length == 0){
        this.$router.push('/DefaultWelcome')
        return
      }
      for (let index = 0; index < this.menuList.length; index++) {
        for (let index1 = 0; index1 < this.menuList[index].childList.length; index1++) {
          if(this.menuList[index].childList[index1].menuCode == 'DCLLC'){
                ifTrue = true
                this.$router.push('/welcome')
                return
          }
        }
          if(ifTrue){
            return
          }else if(!ifTrue && index == this.menuList.length - 1){
              this.$router.push('/DefaultWelcome')
          }
      }
      //console.log(this.menuList)
    },
  },
}
</script>
<style>
  .menu-list>li.is-opened{
    background: #000c17 !important;
  }
</style>
<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-header {
  background: url('../assets/imgs/28.jpg') repeat-x center;
  /* background: #02213e; */
  /* box-shadow: 10px 10px 5px #888888; */
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin-right: 20px;
    }
    span {
      font-size: 20px;
    }
  }
  .right {
    span {
      margin-right: 10px;
    }
  }
}

.el-aside {
  overflow: hidden;
  .el-menu {
    border-right: 0;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    height: 100%;
    .iconfont {
      margin-right: 10px;
    }
  }
  .toggle-button {
    /* background: #02213e; */
    font-size: 24px;
    line-height: 24px;
    text-align: right;
    color: white;
    letter-spacing: 0.2rem;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    right: 4px;
  }
}
.el-main {
  background: #eaedf1;
}
.building{
  background-color: #DAECFF;
  /* background: url("../assets/imgs/41.jpg"); */
  width: 100%;
  height: 100%;
  display: fixed;
  background-size:100% 100% ;
}
body *::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    //background-color: #8c8c8c;
    background-color: rgba(255, 255, 255, 0.25);
}
.menu-aside{
  position: relative;
}
.todo-icon{
  cursor: pointer;
}
</style>

    <template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-form :model="queryInfo" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input v-model="queryInfo.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户姓名">
              <el-input v-model="queryInfo.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号">
              <el-input v-model="queryInfo.paperNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码">
              <el-input v-model="queryInfo.mobileTel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="所属机构">
              <!-- <el-input style="width:280px" v-model="queryInfo.deptId" placeholder="维护机构"></el-input> -->
              <el-popover v-model="treeShow" trigger="click" placement="bottom-start">
                <div class="org-tree">
                  <div class="scroll-style">
                    <el-tree ref="orgTree" :data="orgTree" show-checkbox check-strictly :filter-node-method="filterOrgNode" node-key="deptCode" :props="orgTreeProps" @check="checkOrgTree"> </el-tree>
                  </div>
                  <div class="org-tree-button">
                    <el-button size="small" type="primary" @click="treeOk">确认</el-button>
                    <el-button size="small" @click="treeCancel">取消</el-button>
                  </div>
                </div>
                <el-input slot="reference" style="width: 100%" readonly @click="treeClick" v-model="queryInfo.deptName" placeholder="请选择机构" />
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统角色">
              <el-select style="width: 100%" v-model="queryInfo.roleId" placeholder="请选择">
                <el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户状态">
              <el-select style="width: 100%" v-model="queryInfo.userState" placeholder="请选择用户状态">
                <el-option label="激活" value="0"></el-option>
                <el-option label="锁定" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="启用状态">
              <el-select style="width: 100%" v-model="queryInfo.userAble" placeholder="请选择用户状态">
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 添加按钮 -->
      <el-row >
        <el-col :span="10"> 
          <el-button type="primary" @click="addMethod">新增</el-button>
          <el-button type="primary" @click="getUserList1">查询</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表 -->
      <el-table :data="userList" border stripe :header-cell-style="{ background: '#98DBFF', color: 'black' }">
        <el-table-column label="用户名" prop="userId"></el-table-column>
        <el-table-column label="姓名" prop="userName"></el-table-column>
        <el-table-column label="身份证号" prop="paperNo"></el-table-column>
        <el-table-column label="所属机构" prop="deptName"></el-table-column>
        <!-- <el-table-column label="系统角色" prop="roleName"></el-table-column> -->
        <el-table-column label="手机号码" prop="mobileTel"></el-table-column>
        <el-table-column label="用户状态" width="150px">
          <!-- 自定义列模板，使用作用域插槽，通过scope.row获取当前行的数据修2 -->
          <template slot-scope="scope">
            <el-switch active-value="0" inactive-value="1" v-model="scope.row.userState" @change="userStateChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="150px">
          <template slot-scope="scope">
            <el-switch active-value="0" inactive-value="1"  v-model="scope.row.userAble" @change="userAbleChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
            <el-tooltip effect="dark" content="查看用户角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="showRoleDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="重置用户密码" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-refresh" size="mini" @click="showResetDialog(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="添加用户" :visible.sync="addDialogVisible" width="30%" @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userId" class="demo-form-inline">
          <el-input v-model="addForm.userId" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName" class="demo-form-inline">
          <el-input v-model="addForm.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="paperNo" class="demo-form-inline">
          <el-input v-model="addForm.paperNo" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="所属机构" class="demo-form-inline">
          <!-- <el-input style="width:280px" v-model="queryInfo.deptId" placeholder="维护机构"></el-input> -->
          <el-popover v-model="treeShow1" trigger="click" placement="bottom-start">
            <div class="org-tree">
              <div class="scroll-style">
                <el-tree ref="orgTree1" :data="orgTree1" show-checkbox check-strictly :filter-node-method="filterOrgNode1" node-key="deptCode" :props="orgTreeProps1" @check="checkOrgTree1"> </el-tree>
              </div>
              <div class="org-tree-button">
                <el-button size="small" type="primary" @click="treeOk1">确认</el-button>
                <el-button size="small" @click="treeCancel1">取消</el-button>
              </div>
            </div>
            <el-input slot="reference" style="width: 100%" readonly @click="treeClick1" v-model="addForm.deptName" placeholder="请选择机构" />
          </el-popover>
        </el-form-item>
        <el-form-item label="系统角色" prop="roleId">
          <el-select style="width: 100%" v-model="addForm.roleId" placeholder="请选择系统角色" clearable multiple>
            <el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobileTel" class="demo-form-inline">
          <el-input v-model="addForm.mobileTel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" @click="addUser">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户的对话框 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="修改用户" :visible.sync="editDialogVisible" width="30%" @close="editDialogClosed">
      <el-form :model="editForm" ref="editFormRef" :rules="addFormRules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userId" class="demo-form-inline">
          <el-input v-model="editForm.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName" class="demo-form-inline">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="paperNo" class="demo-form-inline">
          <el-input v-model="editForm.paperNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属机构" prop="deptCode" class="demo-form-inline">
          <!-- <el-input v-model="editForm.deptCode"></el-input> -->
          <el-popover v-model="treeShow2" trigger="click" placement="bottom-start">
            <div class="org-tree">
              <div class="scroll-style">
                <el-tree ref="orgTree2" :data="orgTree2" show-checkbox check-strictly :filter-node-method="filterOrgNode2" node-key="deptCode" :props="orgTreeProps2" @check="checkOrgTree2"> </el-tree>
              </div>
              <div class="org-tree-button">
                <el-button size="small" type="primary" @click="treeOk2">确认</el-button>
                <el-button size="small" @click="treeCancel2">取消</el-button>
              </div>
            </div>
            <el-input slot="reference" style="width: 100%" readonly @click="treeClick1" v-model="editForm.deptName" placeholder="请选择机构" />
          </el-popover>
        </el-form-item>
        <el-form-item label="系统角色" prop="roleId">
          <el-select style="width: 100%" v-model="editForm.roleId" placeholder="请选择" @change="$forceUpdate()" clearable multiple>
            <el-option v-for="item in rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobileTel" class="demo-form-inline">
          <el-input v-model="editForm.mobileTel"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" @click="editUser">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="用户角色列表" :visible.sync="roleDialogVisible" width="30%" append-to-body>
      <el-table :data="showRole" border style="width: 100%">
        <el-table-column header-align="center" align="center" prop="roleName" label="角色名称"> </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="roleDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // form: {
      //   userId:"",
      //   userName:"",
      //   paperNo:"",
      //   mobileTel:"",
      //   deptId:"",
      //   roleId:"",
      //   userState:"",
      // },
      // 查询用户列表的参数对象
      queryInfo: {
        // userId:this.form.userId,
        // userName:this.form.userName,
        // paperNo:this.form.paperNo,
        // mobileTel:this.form.mobileTel,
        // deptId:this.form.deptId,
        // roleId:this.form.roleId,
        // userState:this.form.userState,
        userId: '',
        userName: '',
        paperNo: '',
        mobileTel: '',
        deptId: '',
        roleId: '',
        userState: '',
        userAble: '',
        pagenum: 1, // 页码
        pagesize: 10, // 页大小
        deptName: '',
        deptCode: '',
      },
      // 用户列表数据
      userList: [],
      // 总记录数
      total: 0,
      // 添加对话框的显示或隐藏
      addDialogVisible: false,
      // 添加用户的表单数据对象
      addForm: {
        userId: '',
        userName: '',
        paperNo: '',
        mobileTel: '',
        deptCode: '',
        roleId: '',
        deptName: '',
        rolesId: '',
      },
      // 添加用户的校验规则
      addFormRules: {
        userId: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 20, message: '长度最多20个字符', required: true, trigger: 'change' },
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 10, message: '长度最多10个字符', required: true, trigger: 'change' },
        ],
          rolesId: [
          { required: true, message: '请输入系统角色', trigger: 'blur' },
        ],
        paperNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            pattern: /^(([1-9][0-9]{5}(19|20)[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}([0-9]|X|x))|([1-9][0-9]{5}[0-9]{2}((0[1-9])|(1[0-2]))([0-2][1-9]|10|20|30|31)[0-9]{3}))$/,
            required: true,
            message: '请输入正确身份证号',
            trigger: 'change',
          },
        ],
        mobileTel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, required: true, message: '请输入正确的手机号码', trigger: 'change' },
        ],
      },
      // 修改对话框的显示或隐藏
      editDialogVisible: false,
      editForm: {},

      roleDialogVisible: false,
      userInfo: {
        userId: '',
        // userName:'',
        // roleName:'',
      },
      rolesList: [],
      selectedRoleId: null,
      treeShow: false, // 机构数展开与隐藏
      orgTree: [], // 机构列表
      orgTreeProps: {
        children: 'childList',
        label: 'deptName',
      },
      orgList: [],

      treeShow1: false, // 机构数展开与隐藏
      orgTree1: [], // 机构列表
      orgTreeProps1: {
        children: 'childList',
        label: 'deptName',
      },
      orgList1: [],

      treeShow2: false, // 机构数展开与隐藏
      orgTree2: [], // 机构列表
      orgTreeProps2: {
        children: 'childList',
        label: 'deptName',
      },
      orgList2: [],
      showRole: {},
    }
  },
  created() {
    this.getUserList()
    this.getOrgTree()
  },
  methods: {
    resetForm() {
      this.queryInfo = {
        userId: '',
        userName: '',
        paperNo: '',
        mobileTel: '',
        deptId: '',
        roleId: '',
        userState: '',
        userAble: '',
        pagenum: 1, // 页码
        pagesize: 10, // 页大小
        deptName: '',
        deptCode: '',
      }
      // this.getUserList()
    },
    // 数据重组
    resetOrgList(list) {
      console.log('list', list, list.length)
      const that = this
      for (let i = 0; i < list.length; i++) {
        let obj = list[i]

        // delete obj.childList
        this.orgList.push(obj)
        if (list[i].childList) {
          that.resetOrgList(list[i].childList)
        }
      }
    },
    resetOrgList1(list) {
      console.log('list', list, list.length)
      const that = this
      for (let i = 0; i < list.length; i++) {
        let obj = list[i]

        // delete obj.childList
        this.orgList1.push(obj)
        if (list[i].childList) {
          that.resetOrgList1(list[i].childList)
        }
      }
    },
    resetOrgList2(list) {
      console.log('list', list, list.length)
      const that = this
      for (let i = 0; i < list.length; i++) {
        let obj = list[i]

        // delete obj.childList
        this.orgList2.push(obj)
        if (list[i].childList) {
          that.resetOrgList2(list[i].childList)
        }
      }
    },
    // 获取机构列表
    async getOrgTree() {
      const { data: res } = await this.$http.get('dept/getDeptAdmin', {
        params: { keyWord: '' },
      })
      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.orgTree = res.obj.deptInfo
      // 重组上级机构数据为列表，用于下拉框
      this.orgList = []
      this.resetOrgList(this.orgTree)
    },

    async getOrgTree1() {
      const { data: res } = await this.$http.get('dept/getDeptAdmin', {
        params: { keyWord: '' },
      })
      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.orgTree1 = res.obj.deptInfo
      // 重组上级机构数据为列表，用于下拉框
      this.orgList1 = []
      this.resetOrgList1(this.orgTree1)
    },
    async getOrgTree2() {
      const { data: res } = await this.$http.get('dept/getDeptAdmin', {
        params: { keyWord: '' },
      })
      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.orgTree2 = res.obj.deptInfo
      // 重组上级机构数据为列表，用于下拉框
      this.orgList2 = []
      this.resetOrgList2(this.orgTree2)
    },
    // 点击机构选择确定按钮
    treeOk() {
      const checkNodes = this.$refs.orgTree.getCheckedNodes()

      if (checkNodes.length < 1) {
        this.$message.warning('请选择机构!')
      } else if (checkNodes.length >= 1) {
        this.queryInfo.deptName = checkNodes[0].deptName
        this.queryInfo.deptCode = checkNodes[0].deptCode
        this.treeShow = false
      }
    },
    treeOk1() {
      const checkNodes1 = this.$refs.orgTree1.getCheckedNodes()

      if (checkNodes1.length < 1) {
        this.$message.warning('请选择机构!')
      } else if (checkNodes1.length >= 1) {
        this.addForm.deptName = checkNodes1[0].deptName
        this.addForm.deptCode = checkNodes1[0].deptCode
        this.treeShow1 = false
      }
    },
    treeOk2() {
      const checkNodes2 = this.$refs.orgTree2.getCheckedNodes()

      if (checkNodes2.length < 1) {
        this.$message.warning('请选择机构!')
      } else if (checkNodes2.length >= 1) {
        this.editForm.deptName = checkNodes2[0].deptName
        this.editForm.deptCode = checkNodes2[0].deptCode
        this.treeShow2 = false
      }
    },
    // 点击机构数取消按钮
    treeCancel() {
      this.treeShow = false
    },
    treeCancel1() {
      this.treeShow1 = false
    },
    treeCancel2() {
      this.treeShow2 = false
    },
    // 点击机构数确认按钮
    checkOrgTree(a, b) {
      if (b.checkedKeys.length > 0) {
        this.$refs.orgTree.setCheckedKeys([a.deptCode])
      }
    },
    checkOrgTree1(a, b) {
      if (b.checkedKeys.length > 0) {
        this.$refs.orgTree1.setCheckedKeys([a.deptCode])
      }
    },
    checkOrgTree2(a, b) {
      if (b.checkedKeys.length > 0) {
        this.$refs.orgTree2.setCheckedKeys([a.deptCode])
      }
    },
    // 点击机构数输入框
    treeClick() {
      this.treeShow = !this.treeShow
    },
    treeClick1() {
      this.treeShow1 = !this.treeShow1
    },
    treeClick2() {
      this.treeShow2 = !this.treeShow2
    },
    // 过滤
    filterOrgNode(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    filterOrgNode1(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    filterOrgNode2(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    //查询
    getUserList1(){
        this.queryInfo.pagenum =1
        this.queryInfo.pagesize = 10
        this.getUserList()
    },
    // 获取用户列表数据
    async getUserList() {
      const { data: res } = await this.$http.post('user/getUsersPage', this.queryInfo)

      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.userList = res.obj.userList
      this.total = res.obj.count
      this.updateMethod()
    },
    // 监听pagesize改变的事件
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getUserList()
    },
    // 监听pagenum的事件
    handleCurrentChange(pagenum) {
      this.queryInfo.pagenum = pagenum
      this.getUserList()
    },
    // 监听 switch 开关状态的改变
    async userStateChange(userinfo) {
      const { data: res } = await this.$http.get('user/enableOrDisableUser', {
        params: {
          userId: userinfo.userId,
          userStatus: userinfo.userState,
        },
      })
      if (res.code !== '1') {
        userinfo.userStatus = userinfo.userStatus == 1 ? '0' : '1'
        return this.$message.error(res.msg)
      }
      if(userinfo.userState=='0'){
        this.$message.success('用户已激活！')
      }else{
        this.$message.success('用户已锁定！')
      }

    },
    // 监听 是否停用的 switch 开关状态的改变
    async userAbleChange(userinfo) {
      const { data: res } = await this.$http.get('user/enableOrUserAble', {
        params: {
          userId: userinfo.userId,
          userAble: userinfo.userAble,
        },
      })
      if (res.code !== '1') {
        userinfo.userAble = userinfo.userAble == 1 ? '0' : '1'
        return this.$message.error(res.msg)
      }
      this.$message.success('更新用户停用状态成功！')
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    async addMethod() {
      this.addForm.deptName = ''
      this.addDialogVisible = true
      this.getOrgTree1()
    },

    // 添加用户
    addUser() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
         if(this.addForm.deptName ==''||this.addForm.deptName==undefined||this.addForm.deptName==null){
          return this.$message.warning("请选择所属机构")
        }
        let ids = this.addForm.roleId
        this.addForm.rolesId = ids.toString()
        this.addForm.roleId = ''
         const { data: res } = await this.$http.post('user/createUsers', this.addForm)
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
            // 关闭对话框
          this.addDialogVisible = false
          // 刷新用户列表
          this.getUserList()
          // 提示添加成功
          this.$message.success(res.msg)
      })
    },
    // 获取用户信息角色列表
    async showRoleDialog(id) {
      const { data: res } = await this.$http.get('user/getRoleById', {
        params: {
          id: id,
        },
      })
      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.showRole = res.obj.userInfo
      this.roleDialogVisible = true
    },
    // 显示编辑用户对话框
    async showEditDialog(id) {
      const { data: res } = await this.$http.get('user/getUserInfoById', {
        params: {
          id: id,
        },
      })
      if (res.code !== '1') {
        return this.$message.error(res.msg)
      }
      this.editForm = res.obj.userInfo
      let roleId = res.obj.userInfo.roleList.toString()
      let ids = roleId.split(',')
      for (var i = 0; i < ids.length; i++) {
        ids[i] = parseInt(ids[i])
      }
      this.editForm.roleId = ids
      this.editDialogVisible = true
      this.updateMethod()
      this.getOrgTree2()
    },
    async updateMethod() {
      const { data: res } = await this.$http.get('/role/getRolesByAdmin')
      if (res.code !== '1') {
        return this.$message.error('获取角色列表失败')
      }

      this.rolesList = res.obj.rolesList
    },
    // 修改用户
    editUser() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        if(this.editForm.deptName ==''||this.editForm.deptName==undefined||this.editForm.deptName==null){
          return this.$message.warning("请选择所属机构")
        }
        let ids = this.editForm.roleId
        this.editForm.rolesId = ids.toString()
        this.editForm.roleId = ''
        const { data: res } = await this.$http.post('user/updateUser', this.editForm)

        if (res.code !== '1') {
          return this.$message.error(res.msg)
        }
        this.editDialogVisible = false
        this.getUserList()
        this.$message.success('修改用户成功！')
      })
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 根据ID删除用户
    removeUserById(id) {
      this.$confirm('确定要删除该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data: res } = await this.$http.get('user/delUserInfoById', {
            params: {
              id: id,
            },
          })
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
          this.getUserList()
          this.$message.success('删除用户成功！')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 根据ID重置用户密码
    showResetDialog(id) {
      this.$confirm('确定要重置该用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data: res } = await this.$http.get('user/resetUserInfoById', {
            params: {
              id: id,
            },
          })
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
          this.getUserList()
          this.$message.success('重置成功,用户初始密码为Ab111111')
        })
        .catch(() => {
          this.$message.info('已取消用户密码重置')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.demo-form-inline /deep/.el-input__inner {
  text-align: center;
}
.scroll-style {
  max-height: 100px;
  overflow: auto;
  border-radius: 5px;
}
</style>

    <template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="left">
        <img src="../assets/imgs/shop.png" alt="" />
        <span>金融消费者权益保护管理系统</span>
      </div>
      <div class="right">
        <span>欢迎您：{{ userInfo.userName }}</span>
        <el-badge style="margin-right:26px" :value="total" class="item">
           <i style="width:20px;height:20px" value class="todo-icon el-icon-bell"></i>
        </el-badge>
        <el-button type="danger" size="mini" @click="logout">退出</el-button>
      </div>
    </el-header>
    <el-container style="overflow-y:hidden;">
      <!-- 侧边栏 -->
      <el-aside class="menu-aside" :width="isCollapse ? '64px' : '210px'" style="background:#02213e">
        <!-- 侧边栏菜单 -->
        <el-menu active-text-color="#409Eff" background-color="#02213e" text-color="#fff" :default-active="$route.path" unique-opened router :collapse="isCollapse" :collapse-transition="false">
          <!-- 第一层,item.menuName消保审查 -->
          <el-submenu class="menu-list" :index="item.id + ''" v-for="item in menuList" :key="item.id">
            <!-- 第一层标题 -->
            <template slot="title">
              <span>{{ item.menuName }}</span>
            </template>
            <!-- 第二层-页面，subItem.menuName 流程审核-->
            <template v-for="subItem in item.childList">
              <el-menu-item :index="subItem.menuUrl" :key="subItem.id" v-if="subItem.menuUrl != '1'">
                <!-- <i class="el-icon-menu"></i> -->
                {{ subItem.menuName }}
              </el-menu-item>
            </template>
            <!-- 第二层-合并 -->
            <template v-for="subItem in item.childList">
              <el-submenu :index="subItem.id+''" :key="subItem.id" v-if="subItem.menuUrl == '1'">
                <!-- 第二层标题 -->
                <template slot="title">{{ subItem.menuName }}</template>
                <!--  第三层,subItem.childList是个数组，three是数组中的一个对象-->
                <template v-for="three in subItem.childList">
                    <!-- 第三层-页面 -->
                    <el-menu-item :index="three.menuUrl" :key="three.id" v-if="three.menuUrl != '1'">
                      {{ three.menuName }}
                    </el-menu-item>
                    <!-- 第三层-合并-->
                    <el-submenu :index="three.id+''" :key="three.id" v-if="three.menuUrl == '1'">
                      <template slot="title">{{ three.menuName }}</template>
                      <!-- 第四层 four是数组中的一个对象-->
                      <template v-for="four in three.childList">
                        <el-menu-item :index="four.menuUrl" :key="four.id" v-if="four.menuUrl != '1'">
                          {{ four.menuName }}
                        </el-menu-item>
                        <!-- <el-submenu :index="four.menuUrl" :key="four.id" v-if="four.menuUrl == '1'">
                          <template slot="title">{{ four.menuName }}</template>
                        </el-submenu> -->
                      </template>
                    </el-submenu>
                </template>
              </el-submenu>
            </template>
          </el-submenu>
        </el-menu>
        <!-- 切换菜单的折叠和显示 -->
        <div class="toggle-button" @click="isCollapse = !isCollapse">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" class="isCollapseIcon"></i>
        </div>
      </el-aside>
      <!-- 主体 -->
      <el-main class="building">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息对象
      userInfo: null,
      // 左侧菜单列表
      menuList: [],
      // 图标样式对象
      iconObj: {
        201: 'iconfont icon-shouye',
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
      },
      queryInfo:{
          businessCode:'',
          createName:'',
          businessName:'',
          startTime:'',
          endTime:'',
          pagenum: 1, // 页码
          pagesize: 5 // 页大小
        },
      // 是否折叠左侧的菜单
      isCollapse: false,
      total : ''
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    document.title = '金融消费者权益保护管理系统'
    this.getMenuList()
    // this.goToFlowPath(true)
  },
  methods: {
    // 退出
    logout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          sessionStorage.clear()
           this.$router.push('/login')
          const { data: res } = this.$http.get('login/logout')
          if (res.code !== '1') {
            return this.$message.error(res.msg)
          }
        })
        .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消退出",
          //   });
        })
    },
    // 消息提醒
    // async goToFlowPath(flag) {
    //   const { data: res } = await this.$http.post('syslog/getMessage', {
    //     id: this.userInfo.id,
    //   })
    //   if (res.code !== '1') {
    //     return this.$message.error(res.msg)
    //   }
    //   if (flag && res.obj.message != ''){
    //     this.$notify({
    //           title: '消息提醒',
    //           duration:3000,
    //           message: res.obj.message,
    //           position: 'bottom-right'
    //         })
    //         this.total = 1
    //   }
    //   if (!flag){
    //     this.$notify({
    //           title: '消息提醒',
    //           duration:3000,
    //           message: res.obj.message != '' ? res.obj.message : '暂无提醒',
    //           position: 'bottom-right'
    //         })
    //   }
    // },
    // 获取左侧的菜单列表
    async getMenuList() {
      const { data: res } = await this.$http.get('menu/getAllMenu')
      // console.log(res)
      if (res.code != '1') {
        return this.$message.error(res.msg)
      }
      this.menuList = res.obj.menuList
      var ifTrue= false
      if(this.menuList.length == 0){
        this.$router.push('/DefaultWelcome')
        return
      }
      for (let index = 0; index < this.menuList.length; index++) {
        for (let index1 = 0; index1 < this.menuList[index].childList.length; index1++) {
          if(this.menuList[index].childList[index1].menuCode == 'DCLLC'){
                ifTrue = true
                this.$router.push('/welcome')
                return
          }
        }
          if(ifTrue){
            return
          }else if(!ifTrue && index == this.menuList.length - 1){
              this.$router.push('/DefaultWelcome')
          }
      }
      //console.log(this.menuList)
    },
  },
}
</script>
<style>
  .menu-list>li.is-opened{
    background: #000c17 !important;
  }
</style>
<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-header {
  background: url('../assets/imgs/28.jpg') repeat-x center;
  /* background: #02213e; */
  /* box-shadow: 10px 10px 5px #888888; */
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      margin-right: 20px;
    }
    span {
      font-size: 20px;
    }
  }
  .right {
    span {
      margin-right: 10px;
    }
  }
}

.el-aside {
  overflow: hidden;
  .el-menu {
    border-right: 0;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    height: 100%;
    .iconfont {
      margin-right: 10px;
    }
  }
  .toggle-button {
    /* background: #02213e; */
    font-size: 24px;
    line-height: 24px;
    text-align: right;
    color: white;
    letter-spacing: 0.2rem;
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    right: 4px;
  }
}
.el-main {
  background: #eaedf1;
}
.building{
  background-color: #DAECFF;
  /* background: url("../assets/imgs/41.jpg"); */
  width: 100%;
  height: 100%;
  display: fixed;
  background-size:100% 100% ;
}
body *::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    //background-color: #8c8c8c;
    background-color: rgba(255, 255, 255, 0.25);
}
.menu-aside{
  position: relative;
}
.todo-icon{
  cursor: pointer;
}
</style>
    <template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  }
}
</script>

<style>

</style>
    import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import {
  Message
} from 'element-ui'


Vue.use(VueRouter)
const routes = [
  {
    path:'/',
    redirect:'/login'
  },
  {
    path:'/login',
    component:Login
  },
  {
    path:'/home',
    component: () => import('../components/Home.vue'),
    redirect:'/welcome',
    children:[
      { path:'/DefaultWelcome',component:() => import('../components/DefaultWelcome.vue') },
      { path:'/welcome',component:() => import('../components/flowPath/pending.vue') },
      { path:'/progress',component:() => import('../components/flowPath/progress.vue') },
      { path:'/history',component:() => import('../components/flowPath/history.vue') },
      { path:'/exhibition',component:() => import('../components/organization/exhibition.vue') },
      { path:'/processAudit',component:() => import('../components/organization/processAudit.vue') },
      { path:'/seeAbout',component:() => import('../components/Management/seeAbout.vue') },
      { path:'/reviewProcess',component:() => import('../components/Management/reviewProcess.vue') },
      { path:'/beforehand',component:() => import('../components/examine/processControl/interior/beforehand.vue') },
      { path:'/interim',component:() => import('../components/examine/processControl/interior/interim.vue') },
      { path:'/Afterwards',component:() => import('../components/examine/processControl/interior/Afterwards.vue') },
      
      { path:'/kbmbeforehand',component:() => import('../components/examine/processControl/crossDept/Crossbeforehand.vue') },
      { path:'/kbminterim',component:() => import('../components/examine/processControl/crossDept/Crossinterim.vue') },
      { path:'/kbmAfterwards',component:() => import('../components/examine/processControl/crossDept/CrossAfterwards.vue') },

      { path:'/protectAudit',component:() => import('../components/examine/protectAudit/index.vue') },
      { path:'/recordQuery',component:() => import('../components/examine/synthetical/recordQuery.vue') },
      { path:'/superviseQuery',component:() => import('../components/examine/synthetical/superviseQuery.vue') },
      { path:'/vindicate',component:() => import('../components/activityManage/vindicate.vue') },
      { path:'/activityAudit',component:() => import('../components/activityManage/activityAudit.vue') },
      { path:'/synthesize',component:() => import('../components/activityManage/synthesize.vue') },
      { path:'/maintain',component:() => import('../components/complaint/maintain.vue') },
      { path:'/complaintAudit',component:() => import('../components/complaint/complaintAudit.vue') },
      { path:'/ditchStatistical',component:() => import('../components/complaint/integratedQuery/ditchStatistical.vue') },
      { path:'/sortStatistical',component:() => import('../components/complaint/integratedQuery/sortStatistical.vue') },
      { path:'/causeStatistical',component:() => import('../components/complaint/integratedQuery/causeStatistical.vue') },
      { path:'/caseStatistical',component:() => import('../components/complaint/integratedQuery/caseStatistical.vue') },
      { path:'/preserve',component:() => import('../components/openDay/preserve.vue') },
      { path:'/opendayAudit',component:() => import('../components/openDay/opendayAudit.vue') },
      { path:'/condition',component:() => import('../components/openDay/opendayQuery/condition.vue') },
      { path:'/datastatistical',component:() => import('../components/openDay/opendayQuery/datastatistical.vue') },
      { path:'/journal',component:() => import('../components/system/journal .vue') },
      { path:'/noteWarn',component:() => import('../components/system/noteWarn.vue') },
      { path:'/password',component:() => import('../components/system/password.vue') },
      { path:'/planMaintain',component:() => import('../components/cultivate/planMaintain.vue') },
      { path:'/cultivateAudit',component:() => import('../components/cultivate/cultivateAudit.vue') },
      { path:'/comprehensive',component:() => import('../components/cultivate/synthesize.vue') },
      { path:'/problem',component:() => import('../components/abarbeitung/problem.vue') },
      { path:'/abarbeitAudit',component:() => import('../components/abarbeitung/abarbeitAudit.vue') },
      { path:'/abarSeeAbout',component:() => import('../components/abarbeitung/seeAbout.vue') },
      { path:'/organization',component:() => import('../components/system/organization.vue') },

      

     
      { path:'/orders',component:() => import('../components/order/Orders.vue') },
      { path:'/flowPath',component:() => import('../components/flowPath/pending.vue') },
      { path:'/flowPath/progress',component:() => import('../components/flowPath/progress.vue') },
      { path:'/flowPath/history',component:() => import('../components/flowPath/history.vue') },
      { path:'/organization/exhibition',component:() => import('../components/organization/exhibition.vue') },
      { path:'/organization/processAudit',component:() => import('../components/organization/processAudit.vue') },
      //系统管理
      { path:'/user',component:() => import('../components/system/users.vue') },
      { path:'/role',component:() => import('../components/system/role.vue') },
      { path:'/dict',component:() => import('../components/system/dict.vue') },
    ]
  }
]

const router = new VueRouter({
  routes
})

// 配置路由守卫
router.beforeEach( (to,from,next) => {
  // 如果访问登陆页，则放行
  if(to.path === '/login'){
    return next()
  }
  // 如果用户未登陆，则跳转到/login
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  if(!userInfo){
    return next('/login')
  }
  //判断是否过期,暂时不用，用session判断
  // const startTime = window.localStorage.getItem('tokenStartTime')
  // if(parseInt(new Date().getTime())>(parseInt(startTime)+1000*60*10)){
  //   Message.error("登录状态过期，请重新登录")
  //   return next('/login')
  // }else{
  //   window.localStorage.setItem('tokenStartTime',new Date().getTime())
  // }
  

  // 如果用户已登陆，则放行
  next()
})
export default router
    vue.jshtml5javaspringboot
    阅读 3.6k
    5 个回答
    得票最新
    头像
    起名焦虑症
      13651118
      ✓ 已被采纳

      可以看一下APP.vue

      头像
      linong
        29.2k1266133

        这么巧合的问题，看上去是路由跳了两次才会导致吧？

        最好可以提供一个复现 demo，目前的例子看上去不会有这样的问题。

        你可以定位一下路由跳了几次。或者其他页面有没有发起？network 中可以看调用位置，断点看看

        已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。
        头像
        边城
          59.8k157274

          自己查一下，是哪里执行的。

          我看你 create 的时候执行了一次，handleCurrentChange 的时候又执行了一次。确认一下 el-pagination 会不会在加载完成之后执行一次 handleCurrentChanage。

          已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。
          头像
          陟上晴明
            21.5k145091
            头像
            Meathill
              22.6k133642

              在网络请求处打断点，中断后检查执行栈，往前面找，看是谁触发的。

              你的代码太长了，问题不是这么问的，留下来核心能复现问题就好。

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题