vue2.x+element-ui第一次点击页面只能回显一部分，模态框绑定才能正常回显

第一次登录并点击导航标签

这是错误

不能正常回显

刷新一道后就正常了

关键是不报错我不知道这个到底是哪里的问题

<template>
    <div class="container">
        <h2>系统用户列表</h2>
        <el-row>
        <el-col :span="2">
            <el-button class="filter-btn" type="primary" icon="el-icon-circle-plus" @click="doAdd('新增')">新增</el-button>
        </el-col>
        <el-col :span="5">
            <el-input v-model="filters.uname" placeholder="用户名-模糊查询" :clearable="true" class="fileter-item"/>
        </el-col>
        <el-col :span="4">
            <el-select v-model="filters.status" placeholder="状态" :clearable="true" class="fileter-item">
                <el-option v-for="option in allStatus" :key="option.value" :label="option.text" :value="option.value"/>
            </el-select>
        </el-col>
        <el-col :span="2">
            <el-button class="filter-btn" type="primary" icon="el-icon-search" @click="getRecords()">查询</el-button>
        </el-col>
       </el-row>
        <el-table :loading="loading" :data="records" border fit highlight-current-row style="width: 100%">
          <el-table-column width="50" type="selection"/>
         <el-table-column prop="uname" label="用户名" min-width="120px" align="center"/>
         <el-table-column prop="account" label="账号" min-width="120px" align="center"/>
         <el-table-column prop="roleName" label="担任角色" min-width="300px" align="center"/>
         <el-table-column prop="statusName" label="状态" min-width="120px" align="center"/>
         <el-table-column  label="操作" min-width="200px" align="center" fixed="right">
             <template slot-scope="scope">
                   <el-button class="filter-btn" type="primary" icon="el-icon-edit" circle title="编辑" @click="putDialog(scope.row,'编辑')"/>
                    <el-button class="filter-btn" type="primary" icon="el-icon-info" circle title="详情" @click="doDialog(scope.row)"/>
                    <el-button class="filter-btn" type="danger" icon="el-icon-delete" circle title="删除" @click="del(scope.row)"/>
               </template>
         </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top:20px;float:right"
           background
           :current-page.sync="pageIndex"
           :current-size.sync="pageSize"
          :total="total"
          :page-sizes="pageSizes"
          v-bind="$attrs"
          @size-change ="handleSizeChang"
          @current-change="handleCurrentChang"
          layout="total,sizes,prev, pager, next,jumper"/>

          <el-dialog :visible.sync="dialogVisible" :show-close="false" :title="dialogTitle">
              <el-form ref="detail" :model="detail" label-width="120px">
                  <el-form-item label="用户名">
                      <el-input v-model="detail.uname" :readonly="saveFlag===false"/>
                  </el-form-item>
                 <el-form-item label="账号">
                      <el-input v-model="detail.account" :readonly="saveFlag===false"/>
                  </el-form-item>
                 <el-form-item label="密码" v-if="dialogTitle==='新增'">
                      <el-input v-model="detail.password" :readonly="saveFlag===false"/>
                  </el-form-item>
                  <el-form-item label="担任角色" prop="roleIdList">
                      <el-checkbox-group v-model="detail.roleIdList">
                          <el-checkbox :disabled="saveFlag===false" v-for ='sli in allRole' :key="sli.value" :label="sli.value">
                            {{sli.text}}
                          </el-checkbox>
                      </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="状态" prop="status">
                      <el-radio-group v-model="detail.status">
                          <el-radio :disabled="saveFlag===false" v-for="sli in allStatus" :key="sli.value" :label="sli.value">
                            {{sli.text}}
                          </el-radio>
                      </el-radio-group>
                  </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="closeDialog()">关闭</el-button>
                  <el-button @click="save()" v-if="saveFlag" type="primary">保存</el-button>
              </span>
          </el-dialog>
    </div>
</template>
<script>
export default{
  data () {
    return {
      loading: false, // 后台标志
      filters: {
        uname: '', // 查询条件-用户名
        status: null // 查询条件-状态
      },
      records: null, // 表格数据集
      pageIndex: 1, // 页号
      pageSize: 10, // 行数
      total: 0, // 总条数
      pageSizes: [10, 20, 50, 100], // 分页行数选择
      allStatus: [], // 状态备选项
      allRole: [], // 角色备选项
      dialogVisible: false, // 模态框显示想
      dialogTitle: '', // 模态框标题
      saveFlag: false, // 模态框保存显示
      detail: {// 模态框-form表单
        uid: 0,
        account: '',
        uname: '',
        password: '',
        roleIdList: [],
        status: '0'

      }
    }
  },
  created () {
    this.getRecords()
    this.ListStatuser()
    this.ListRoles()
  },
  methods: {
    openDelConfirm (name) {
      return this.$confirm(`此操作将删除 ${name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    del (row) {
      this.openDelConfirm(row.uname).then(() => {
        this.loading = true
        this.axios.delete('/pmsinfo/sysUser/delete/' + row.uid).then(res => {
          this.Loading = false
          if (res.data.code === 200) {
            this.$message.success({
              message: res.data.message
            })
          } else {
            this.$message.error({
              message: res.data.message
            })
          }
          this.getRecords()
        })
      })
    },
    ListStatuser () {
      this.Loading = true
      this.axios.get('/pmsinfo/sysUser/ListStatus').then(res => {
        this.Loading = false
        if (res.data.code === 200) {
          this.allStatus = res.data.data
        }
      })
    },
    ListRoles () {
      this.Loading = true
      this.axios.get('/pmsinfo/sysUser/listRoles').then(res => {
        this.Loading = false
        if (res.data.code === 200) {
          this.allRole = res.data.data
        }
      })
    },
    getRecords () {
      this.loading = true
      var qo = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        uname: this.filters.uname,
        status: this.filters.status
      }
      this.axios.post('/pmsinfo/sysUser/selectName', qo).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.records = res.data.data.records
          this.total = res.data.data.total
        }
      })
    },
    save () {
      this.loading = true
      var Url = '/pmsinfo/sysUser/update'
      if (this.dialogTitle === '新增') {
        Url = '/pmsinfo/sysUser/add'
      }
      this.axios.post(Url, this.detail).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.$message.success({
            message: res.data.message
          })
          this.getRecords()
        } else {
          this.$message.error({
            message: res.data.message
          })
        }
        this.closeDialog()
      }).catch(function (e) {
        this.$message.error({
          message: 'api访问出错'
        })
      })
    },
    doDialog (row) {
      this.saveFlag = false
      this.dialogVisible = true
      this.dialogTitle = '详情'
      this.loading = true
      this.axios.get('/pmsinfo/sysUser/details/' + row.uid).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.detail = res.data.data
          this.detail.status = this.detail.status + ''
          this.detail.roleIdList = this.getString(this.detail.roleIdList)
        } else {
          this.$message.error({
            message: res.data.message
          })
        }
      })
    },
    getString (data) {
      let list = []
      data.forEach(item => {
        item = item + ''
        list.push(item)
      })
      return list
    },
    doAdd (title) {
      this.saveFlag = true
      this.dialogVisible = true
      this.dialogTitle = title
      this.detali = {
        uid: 0,
        account: '',
        uname: '',
        password: '',
        roleIdList: [],
        status: 0
      }
    },
    putDialog (row, title) {
      this.saveFlag = true
      this.dialogVisible = true
      this.dialogTitle = title
      this.detail = {
        uid: row.uid,
        account: row.account,
        uname: row.uname,
        roleIdList: this.getString(row.roleIdList),
        status: row.status + ''
      }
    },
    rowClick (row) {
      this.$emit('selectChanged', row)
    },
    handleSizeChang: function (size) {
      this.pageSize = size
      this.getRecords()
    },
    handleCurrentChang: function (currentPage) {
      this.pageIndex = currentPage
      this.getRecords()
    },
    closeDialog () {
      this.dialogVisible = false
    }
  }
}
</script>

<style>
  .container{
    padding: 10px;
}
h2{
    text-align: center;
}
</style>

下面是我的导航

```bash
<template>
<el-container>
     <el-menu
     :default-active="$route.path"
     background-color="hsla(175, 79%, 53%, 0.514)"
     class="el-menu-vertical-demo"
     :unique-opened="true"
     :collapse-transition="true"
     text-color="#fff"
     active-text-color="#ffd04b"
     :collapse="isCollapse"
     router>
          <el-submenu index="sys" v-for="first in hisRouter" :key="first.mid">
          <template slot="title" v-if="first.parentId === null">
            <i :class="first.imgUrl"></i>
            <span>{{ first.mname }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="second.appUrl" v-for="second in first.children" :key="second.mid">
              <i :class="second.imgUrl"></i>
              <span slot="title">{{second.mname}}</span>
            </el-menu-item>
         </el-menu-item-group>
        </el-submenu>
    </el-menu>
  <el-container>
    <el-header>
    <div style="float: left; cursor:pointer" @click="isOpen()">
        <i :class="{'el-icon-s-fold': isCollapse == false?true:false, 'el-icon-s-unfold': isCollapse == true?true:false}" style="font-size: 25px"></i>
      </div>
      <el-dropdown trigger="click" style="cursor: pointer; float: right">
          <span class="el-dropdown-link ">欢迎{{UserName}}
              <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown">
           <el-dropdown-item @click.native="signout()">退出</el-dropdown-item>
          <el-dropdown-item>关闭全部页面</el-dropdown-item>
          <el-dropdown-item>刷新页面</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  </el-header>
   <el-main :style="{height: setHeight+'px', padding: 0}">
         <transition name="fade" mode="out-in">
            <router-view/>
       </transition>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false, // false为展开 true为收缩
      UserName: localStorage.getItem('UserName'),
      hisRouter: this.$store.getters.routers
    }
  },
  computed: {
    setHeight () {
      return document.documentElement.clientHeight - 65
    },
    activeNav () { // 当前激活的导航
      return this.$route.path
    }
  },
  methods: {
    isOpen () { // 判断左侧栏是否展开或收缩
      if (this.isCollapse === false) {
        this.isCollapse = true
      } else {
        this.isCollapse = false
      }
    },
    signout () {
      this.axios.post('/pmsinfo/sysUser/logout').then(res => {
        if (res.data.code === 200) {
          localStorage.removeItem('token')
          this.$message.success({
            message: res.data.message
          })
          this.$router.push('/')
        } else {
          this.$message.error({
            message: res.data.message
          })
        }
      })
    }
  },
  mounted () {
  },
  created () {
  }

}
</script>

<style>
body,html{
    margin: 0;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
    text-align: left;
  }
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-submenu [class^=fa] {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 16px;
  }
  .el-menu{
  border: 0px #fff solid;
}
  .el-menu--collapse {
    height: 100%;
  }
  .el-container{  margin: 0;
  padding: 0;
    padding: 0;
    height: 100vh;
    font-size: 15px;
}
</style>

```

分页没有初始值

<el-pagination
            style="margin-top:20px;float:right"
           background
           :current-page.sync="pageIndex"
           :current-size.sync="pageSize"
          :total="total"
          :page-sizes="pageSizes"
:page-size="10"
          v-bind="$attrs"
          @size-change ="handleSizeChang"
          @current-change="handleCurrentChang"
          layout="total,sizes,prev, pager, next,jumper"/>

       :current-size.sync="pageSize"
      这里应该是:page-size="pageSize"