ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

angular中table表格组件的使用

2020-11-30 15:01:49  阅读:312  来源: 互联网

标签:queryModelList vendor description param 组件 table model data angular


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中

标签:queryModelList,vendor,description,param,组件,table,model,data,angular
来源: https://www.cnblogs.com/wsm777/p/14061325.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有