vue中页面的回显与回调功能

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中页面的回显功能的实现。