前端-angular佐罗表格的使用和效果展示

前言
  小编最近在做项目的时候用的佐罗的控件来进行数据显示，佐罗的 Ant Design 的 Angular 实现地址在这里：https://ng.ant.design/docs/introduce/zh 很多样式和模板可以供我们参考和应用。下面是小编进行的一个table表格的使用，仅供参考
  html部分代码：

      
        

          

            
              
                
                  课程名称
                  课程代码
                  课程类型
                  课程类别
                  课程分数
                
              
              
                
                  {{data?.name}}
                  {{data?.code}}
                  {{data?.courseType}}
                  {{data?.courseCategory}}
                  {{data?.score}}
                  
                  
                
                          
            
          
        
      
    

  ts部分代码

searchTableData() {
    const url = 'exam-web/course/getCourse/' + this.searchValue + '/' + this.pageIndex + '/' + this.pageSize;
    this.loadingValue = true;
    if (this.searchValue === undefined || this.searchValue === '') {
      this.tipMsgService.createMessage('温馨提示', '请选择或输入具体的查询内容');
      this.loadingValue = false;
    } else {
      this.loadingValue = true;
      this.http.get(url).subscribe(
        res => {
          if (res.json().code === ResponseCode.SUCCESSCODE) {
            if (res.json().data.length === 0) {
              this.tipMsgService.createMessage('温馨提示', '获取数据为空');
              this.loadingValue = false;
            } else {
              this.dataSet = res.json().data.list;
              this.total = this.dataSet.length;
              for (let i = 0; i < this.dataSet.length; i++) {
                if (this.dataSet[i].courseCategory === '1') {
                  this.dataSet[i].courseCategory = '理论课';
                } else if (this.dataSet[i].courseCategory === '2') {
                  this.dataSet[i].courseCategory = '实践课';
                } else if (this.dataSet[i].courseCategory === '3') {
                  this.dataSet[i].courseCategory = '理论实践课';
                }
              }
              for (let i = 0; i < this.dataSet.length; i++) {
                if (this.dataSet[i].courseType === '1') {
                  this.dataSet[i].courseType = '专业必修';
                } else if (this.dataSet[i].courseType === '2') {
                  this.dataSet[i].courseType = '公共必修';
                } else if (this.dataSet[i].courseType === '3') {
                  this.dataSet[i].courseType = '专业选修';
                } else if (this.dataSet[i].courseType === '4') {
                  this.dataSet[i].courseType = '公共选修';
                }
              }
              for (let i = 0; i < this.dataSet.length; i++) {
                if (this.dataSet[i].score === '') {
                  this.dataSet[i].score = '—';
                }
              }
              this.loadingValue = false;
            }
          } else if (res.json().code === ResponseCode.FAILCODE) {
            this.tipMsgService.createMessage(ResponseCode.ErrorTip, '表格数据查询失败');
            this.loadingValue = false;
          }
        }
      );
      // 数据加载延长时间--三秒
      window.setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  }
  // 页面的分页
   checkAll(value: boolean): void {
    this.displayData.forEach(data => data.checked = value);
    this.refreshStatus();
  }
  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean }>): void {
    this.displayData = $event;
  }
  refreshStatus(): void {
    const allChecked = this.displayData.every(value => value.checked === true);
    const allUnChecked = this.displayData.every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
    this.checkedNumber = this.dataSet.filter(value => value.checked).length;
  }

  table表格显示的内容是通过[nzData]="dataSet" 绑定的数据数组，这个数组是在ts中赋值和转化的
  [nzLoading]="loadingValue" 是在页面显示的时候出现一个转圈的等待，可以增加用户体验。
  [nzFooter]="'共'+total+'项记录'" 是页面左下角的总数据数量，这个方法也是佐罗封装好的，直接引用就行了。
  (nzPageIndexChange)="refreshStatus()" (nzPageSizeChange)="refreshStatus()"这里是页面分页所用的方法
  最终效果如下

总结
  以上就是小编对佐罗的table表格的使用情况，还有很大的进步空间，另外，小编想说一句，封装好的东西确实是好用，但是有时候会让我们忽略一些基础的东西，比如 https://blog.csdn.net/yjt13/article/details/85041125 这篇博客中提到的tab标签佐罗封装的并不能达到要求，有时候还是得在基础技能掌握的情况下再去用封装好的东西，这样能力的提升与效果是最明显的。
  本篇分享到此结束，希望对你有所帮助