angular中table表格组件的使用
时间:2020-11-30
本文章向大家介绍angular中table表格组件的使用,主要包括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中
原文地址:https://www.cnblogs.com/wsm777/p/14061325.html
- Extjs 项目中常用的小技巧,也许你用得着(1)
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值
- 【实践操作】 在iOS11中使用Core ML 和TensorFlow对手势进行智能识别
- 这或许是对小白最友好的python入门了吧——15,嵌套
- C#新功能--命名参数与可选参数
- 这或许是对小白最友好的python入门了吧——14,遍历字典
- C#新功能--命名参数
- Tomcat 安全配置与性能优化
- 【机器学习】伪标签(Pseudo-Labelling)的介绍:一种半监督机器学习技术
- 这或许是对小白最友好的python入门了吧——13,字典初识
- PHP 安全与性能
- 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该...
- Linux 系统与数据库安全
- 这或许是对小白最友好的python入门了吧——12,列表深入体验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 知识卡片 CNN 卷积神经网络
- 计算机基础知识总结与操作系统 PDF 下载
- 【动手学深度学习】笔记一
- 【Python】使用Pygame做一个Flappy bird小游戏(一)
- 从0到1,实现你的第一个多层神经网络
- 【Python】使用Pygame做一个Flappy bird小游戏(二)
- 【Pandas】pandas的主要数据结构
- 【Python】使用Pygame做一个Flappy bird小游戏(三)
- Godot游戏开发实践之三:容易被忽视的Resource
- 方便快捷的调试 Node.js 程序
- LeetCode 06Z字形变换&07整数反转
- 对搜索表单提交是否为空进行弹出提示
- PWN入门(Fastbin Attack)
- Qt项目网络聊天室设计
- nginx 端口转发