实现方式
在资源列表的顶部,有一个查询条件的表单,用户可以输入IP地址和资源名称来进行查询筛选操作。
数据与方法
- queryParam:存储查询条件的数据对象,包括ip和resource_name两个属性。
- query():处理查询操作的方法,根据用户输入的查询条件,通过调用接口获取匹配的资源列表数据。
效果图片
示例代码
<a-form layout="inline">
<a-form-item>
<span>IP地址</span>
<a-input v-model="queryParam.ip" placeholder="请输入IP地址" allowClear />
</a-form-item>
<a-form-item>
<span>资源名称</span>
<a-input v-model="queryParam.resource_name" placeholder="请输入资源名称" allowClear />
</a-form-item>
<span>
<a-button @click="() => (this.queryParam = { ip: '', resource_name: '' })">重置</a-button> <a-button type="primary" @click="query">查询</a-button>
</span>
</a-form>
data() {
return {
queryParam: {
ip: '',
resource_name: ''
},
查询点击事件:
query() {
this.data = [];
this.pageIndex = 1;
this.initData(); // 调用列表刷新事件
},
获取数据接口:
// 列表数据更新
initData() {
let _this = this;
this.loading = true;
//调用获取参数值接口 搜索ip参数值 搜索名称参数值 第一页数据 一页有多少条数据
getList(this.queryParam.ip, this.queryParam.resource_name, this.pageIndex, this.pagination.pageSize)
.then(res => {
// 省略其它事件
});
},
在Vue组件中添加一个表单,表单中包含两个输入框,分别用于输入IP地址和资源名称。通过v-model指令将输入框的值绑定到queryParam对象的相应属性上。当用户点击查询按钮时,调用query()方法进行列表筛选操作,调用接口传递筛选条件。
使用方法
将以上示例代码添加到您的Vue组件中,根据实际需求适配查询条件的数据结构和查询操作的业务逻辑。用户可通过输入IP地址和资源名称来进行查询,点击查询按钮后,调用接口获取匹配的资源列表数据。