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中