angular中table表格组件的使用

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中

上一篇:master-worker常驻型程序代码修改哪些需要重启master或者worker


下一篇:YIE002开发探索04-定时器