js异步代码导致页面无数据

<template>
<!-- 用户列表 -->
<div class='user_list'>
    <div class='title'>
        <el-button type="primary" @click="dialogFormVisible = true">
            新增
        </el-button>
    </div>
        <el-card>
        <div class='content' >
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="账号">
                    <el-input v-model="formInline.name" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>  
            <el-table :data="pageResult.rows" style="margin-bottom:20px;" stripe border>
                <el-table-column type="index" label="序号" width="80">    
                </el-table-column>
                <el-table-column prop="name" label="账号" width="180">    
                    <template slot-scope="scope">
                        {{scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column prop="user" label="姓名" width="180">
                    <template slot-scope="scope">
                        {{scope.row.user}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="手机号" width="180">    
                    <template slot-scope="scope">
                        {{scope.row.phone}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="角色" width="">    
                    <template slot-scope="scope">
                        {{scope.row.roleNames}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">    
                    <template slot-scope="scope">
                        <el-switch
                        v-model="scope.row.status"
                        @change="change(scope.row.id,scope.row.status)"
                        active-text=""
                        inactive-text="">
                        </el-switch>
                    </template>
                </el-table-column>

				<el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        type="primary"
                        @click="findUserById(scope.row.id)">修改</el-button>
                        <el-button
                        type="danger"
                        @click="deleteById(scope.row.id)">删除</el-button>
                        <el-button
                        type="primary"
                        @click="assignPermissions(scope.row.id)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="formInline.pageNumber"
                :page-size="formInline.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pageResult.total">
            </el-pagination>
        </div>   
        </el-card>     
        <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="formUser">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input
                        placeholder="请输入账号"
                        v-model="formUser.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input
                        placeholder="请输入姓名"
                        v-model="formUser.user">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input
                        placeholder="请输入密码"
                        v-model="formUser.password">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input
                        placeholder="请输入手机号"
                        v-model="formUser.phone">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改用户" :visible.sync="dialogFormVisibleUpdate" width="30%">
            <el-form :model="formUser">
                <el-form-item label="账号" :label-width="formLabelWidth">
                    <el-input
                        v-model="formUser.name" disabled>
                    </el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input
                        v-model="formUser.user">
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input
                        v-model="formUser.phone" >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                <el-button type="primary" @click="updateUser()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="分配权限" :visible.sync="dialogFormVisiblePermission" width="30%">
            <el-checkbox-group v-model="checkList">
            <el-row>
                <el-col :span="8">
                    <el-checkbox label="视频监控员"></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="停车场管理员"></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="一卡通管理员" ></el-checkbox>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-checkbox label="信息发布管理员"></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="建筑设备管理员"></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="入侵报警管理员"></el-checkbox>
                </el-col>
            </el-row>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblePermission = false;">取 消</el-button>
                <el-button type="primary" @click="authorize()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
import api from '@/api/index';
import user from '../../store/modules/user';
import {permission} from '../../utils/util';

export default {
    data() {
        return {
            value:"",
            dialogFormVisible:false,
            dialogFormVisibleUpdate:false,
            dialogFormVisiblePermission:false,
            roleName:'',
            zbCompanyList:[],
            username:sessionStorage.getItem("user"),
            show1:true,
            pageResult:{
                rows:[{name:"admin",password:"admin123",phone:123456,status:1,user:"系统管理员"}]
            },
            formInline: {
				name: '',
                pageSize:10,
                pageNumber:3,
            },
            formLabelWidth: '60px',
            formUser:{

            },
            formStatus:{
                id:'',
                status:'',
            },
            checkList:[],
            userId:'',
        }
    },
    methods: {
        //分页条件查询
        search (formInline) {
            api.user.pageSearch(formInline).then(response => {
                let tempPageResult = response.data
                for(let i = 0;i < tempPageResult.rows.length;i++){
                    if(tempPageResult.rows[i].status == 0){
                        tempPageResult.rows[i].status = true
                    }else {
                        tempPageResult.rows[i].status = false
                    }
                } 
                this.pageResult = tempPageResult;
            });
        },
        //当前页码改变
        handleCurrentChange: function (currentPage) {
            this.formInline.pageNumber = currentPage
            this.search(this.formInline);
        },
        //查询
        onSubmit() {
            this.formInline.pageNumber = 1
            this.search(this.formInline);
        },
        //新增用户
        addUser() {
            this.dialogFormVisible = false;
            api.user.saveUser(this.formUser).then(response =>{
                this.search(this.formInline);

            });
        },
        //查询用户详情信息
        findUserById(id){
            api.user.findById(id).then(response => {
                this.formUser = response.data;
                this.dialogFormVisibleUpdate = true;
            })
        },
        //修改用户信息
        updateUser(){
            this.dialogFormVisibleUpdate = false;
            let obj = new Object();
            const {id,user,phone} = this.formUser;
            obj = {id:id,user:user,phone:phone};
            api.user.update(obj).then(response => {
                this.search(this.formInline);
                this.formUser = {};
            })
        },
        //打开分配权限dialog
        assignPermissions(id){
            this.dialogFormVisiblePermission = true;
            this.userId = id;
        },
        //分配权限
        authorize(){
            for(let i=0;i<this.checkList.length;i++) {
                this.checkList[i] = permission[this.checkList[i]];                
            }
            let str = this.checkList.join(",");
            api.user.authorize(this.userId,str).then(response =>{
                this.search(this.formInline);
                this.checkList = [];
                this.dialogFormVisiblePermission = false;
            })
        },
        //更改状态
        change(id,status){
            if(status == true){
                status = 0;
            }else{
                status = 1;
            }
            this.formStatus.id = id;
            this.formStatus.status = status;
            api.user.updateStatus(this.formStatus).then(response =>{
                this.search(this.formInline);
            });
        },
        //删除用户
        deleteById(id){
            api.user.delete(id).then(response =>{
                this.search(this.formInline);
            });
        },
    },
    created() {
        this.search(this.formInline)
    },
}
</script>
 

<style lang='scss'>
.user_list{
    margin: 0 auto;
    padding: 15px 25px;
    position: relative;
    .title{
        position: absolute;
        right: 85px;
        z-index: 1000;
        top: 68px;
    }
    .el-switch{
        padding-right: 80px;
    }
}
</style>

查询用户详情信息错误代码

        findUserById(id){
        this.dialogFormVisibleUpdate = true;
            api.user.findById(id).then(response => {
                this.formUser = response.data;
            })
        },

由于页面还没打开数据就渲染完成，所以每次都是上一次的数据