vue列表-查询筛选功能_vue表单查询

实现方式

在资源列表的顶部，有一个查询条件的表单，用户可以输入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地址和资源名称来进行查询，点击查询按钮后，调用接口获取匹配的资源列表数据。