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