1.搜尋功能的實現

table元件中有屬性

[data]="data"            傳遞給表格的資料，表格根據column中的配置來顯示data中的資料
[total]="count"           頁面資料的總條數
[isPrepareDataOnLocal]="false"     獲取頁面資料的總條數需要的條件

在輸入框輸入時候有回撥函式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中