HTML中的引用格式：

<tp-table ref="branchTab" :all_params="branch_params" @add-btn="addBranch"  @del-btn="delShow"></tp-table>

script檔案中的方法：

  branch_params:{
                    id: 'branch_tab',
                    index: true,
                    loading:true,
                    checkBox: true,
                    url: '/ssa/java/asset/branch/branchList',
                    type:'table',
                    ajaxType:'get',
                    data:{},
                    add_btn:true,
                    del_btn:true,
                    cols: [
                        {
                            title: '分支',
                            key: 'branchName',
                            width: 200,
                            align: 'center',
                        },
                        {
                            title: '資產組',
                            key: 'groupNames',
                            width: 320,
                            align: 'center',
                        },
                        {
                            title: 'IP地址範圍',
                            key: 'ipScope',
                            width: 400,
                            align: 'center',
                        },
                        {
                            title: '地理位置',
                            key: 'site',
                            align: 'center',
                            search:'site',
                        },
                        {
                            title: '責任人',
                            key: 'responser',
                            align: 'center',
                        },
                        {
                            title: '聯絡方式',
                            key: 'phone',
                            align: 'center',
                        },
                        {
                            title: '備註',
                            key: 'remark',
                            align: 'center',
                        },
                        {
                            title: '操作',
                            key: '操作',
                            width: 150,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.branchItem= {
                                                    id: params.row.id,
                                                    branchName: params.row.branchName,
                                                    groupNames: params.row.groupNames,
                                                    site: params.row.site,
                                                    responser: params.row.responser,
                                                    phone: params.row.phone,
                                                    remark:params.row.remark,
                                                    uuid:params.row.uuid
                                                };
                                                this.getBranchTargetKeys(params.row.uuid);
                                                this.title="修改";
                                                this.branchModelShow =true;
                                            }
                                        }
                                    }, '修改')
                                ]);
                            }
                        }
                    ]
                },
 

在這裡主要是發請求並且回顯的。

其中有兩種方式：

一種是cols裡邊的回顯功能，另一種是定義方法和render函式

通過請求去後端呼叫方法去在後臺完成資料庫的。

當後臺將查詢到的資料返回之後，這個cols方法中會自動按照欄位的不同去匹配，然後在前端顯示出來。

這就是vue中頁面的回顯功能的實現。