<template> <div class="page-data"> <div class="page-data_head"> <!--搜索--> <page-filter :query.sync="filterInfo.query" @handleClick="handleClick" /> </div> <div class="page-data_body"> <page-table tabIndex pagination :api-url="tableInfo.url" :refresh="tableInfo.refresh" :data.sync="tableInfo.data" :query="filterInfo.query" :is-level="tableInfo.isLevel" :list-type-info="listTypeInfo" :init-curpage="tableInfo.initCurpage" :field-list="tableInfo.fieldList" @handleClick="handleClick" /> </div> </div> </template> <script> export default { data() { return { //搜索相关 filterInfo: { query: { serverIp: this.$route.query.publicAddress } }, //表格相关 tableInfo: { url: this.nozzle.nginxWatch, //接口地址 refresh: 1, initCurpage: 1, data: [], isLevel: true, fieldList: [ { label: "nginx名称", value: "nginxName", minWidth: 100, tooltip: true }, { label: "nginx端口", value: "nginxPort", width: 90 }, { label: "监控路径", value: "monitorPath", minWidth: 120, tooltip: true }, { label: "服务地址", value: "url", minWidth: 100, tooltip: true }, { label: "服务端口", value: "serverPort", width: 90 }, { label: "端口类型", value: "portType", width: 100, list: "portTypeList" }, { label: "描述", value: "description", minWidth: 80, tooltip: true }, { label: "关联应用(jar)", value: "relatedApplication", minWidth: 100, tooltip: true }, ] }, //列表相关 listTypeInfo: { portTypeList: [ {key: "内网", value: 1}, {key: "外网", value: 2}, {key: "第三方", value: 3}, {key: "本地", value: 4}, ] } } }, mounted() { this.tableInfo.refresh = Math.random(); }, methods: { //点击事件 handleClick(event, data) { switch(event) { //搜索 case "search": this.tableInfo.initCurpage = Math.random(); this.tableInfo.refresh = Math.random(); break; } } } } </script> <style lang="scss" scoped> .page-data{ height: 100%; &_head{ } &_body{ flex: 1; } } </style>