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中