1.搜索功能的实现
table组件中有属性
[data]="data" 传递给表格的数据,表格根据column中的配置来显示data中的数据 [total]="count" 页面数据的总条数 [isPrepareDataOnLocal]="false" 获取页面数据的总条数需要的条件
(filterInfoChange)="filterInfoChange($event)" 当在表格搜索框输入内容时的回调,回调时传递的参数详见 前端数据处理 样例
在输入框输入时候有回调函数 filterInfoChange($event)"
在回调函数中
this.model = event.globalFilterString // 其中model是输入框的属性值 也就是data中,columu对象中对应的输入框的属性值
console.log(this.model); //输入框的值
this.queryModelList() // 重点是这个
在queryModelList()函数中拿到model等几个搜索框或者选项的值,发送请求,拿到获取的值赋值给表格的data和total
代码模式如下 注意这里this的值 用到了 回调函数.bind(this) this指向整体box盒子
queryModelList() {
this.showLoading = true;
// 结构赋值 model, operaTypeName, vendor, description为data的colmun中的属性 为搜索等值
let {model, operaTypeName, vendor, description, pageIndex, pageSize} = this
let param = { pageIndex, pageSize } // 页码
// 后端字段不能传空字符串,不是冗余代码
if (model !== '') {param['model'] = model} // 下面是在有的情况下就单独判定
if (operaTypeName !== '') {param['operaTypeName'] = operaTypeName}
if (vendor !== '') {param['vendor'] = vendor}
if (description !== '') {param['description'] = description}
this.accessService.queryModelList(param).subscribe(resp => {
if (resp.code === 0) {
this.data = resp.data;
this.count = resp.count;
} else {
this.plxMessage.error('数据获取失败!', '');
}
this.showLoading = false;
}, error => {
this.showLoading = false;
this.plxMessage.error('数据获取失败!', '');
});
}
注意: 需要把queryModelList()函数放在生命周期ogOninit中