table组件

说明

基于antd8.2.1版本table的二次封装。所以如果用其他版本 可能 会出现问题

组件名： app-my-table

使用方式

属性方法说明在代码下文

• html：

<app-my-table
  #table  
  [tableHTTPSetting]="tableHTTPSetting"
  [tableOptionSetting]="tableOptionSetting"
  [toolbarTemplate]="toolbarTemplate"
  [tdTemplateList]="{errorCode:errorCode,remark:remark}"
  [tdTemplate]="tbody"
  [expandTemplate]="expandTemplate"
  (successCallBack)="getTableData($event)"
  (trClick)="trDetail($event)"
>
  <!-- 
    methods ：
    (successCallBack)： 加载完成table 返回接口所有数据
    (trClick) ： 点击行返回单行数据
   -->


  <!-- TODO：页头右侧自定义工具栏 start-->
  <!-- ! 页头 右侧工具栏 [toolbarTemplate]="toolbarTemplate" toolbarTemplate属性传递模板 -->
  <ng-template #toolbarTemplate>
    <ngx-commonbutton class="export" [jurisdiction]="false" [buttonName]="'导出模板'"></ngx-commonbutton>
    <ngx-commonbutton class="export" [jurisdiction]="false" [buttonName]="'123213'"></ngx-commonbutton>
  </ng-template>
  <!-- TODO：页头右侧自定义工具栏 end-->


  <!-- TODO：整个td模板 start -->
  <!-- ! 传递整个td模板, tdTemplate属性传递模板 [tdTemplate]="tbody" tdTemplate属性传递模板 --->
  <!-- ! tdTemplate 存在时 tdTemplateList 无效-->
  <!-- <ng-template #tbody let-data="tableData" let-index="index">
    <td nzAlign="center" nzLeft="120px">{{ data.pointTimeStr }}</td>
    <td nzAlign="center" nzLeft="320px">{{ data.equipmentName }}</td>
    <td nzAlign="center">{{ data.serialNumber }}</td>
    <td nzAlign="center">{{ data.variableDescrible }}</td>
    <td nzAlign="center">{{ data.pointTimeStr }}</td>
    <td nzAlign="center">{{ data.equipmentName }}</td>
    <td nzAlign="center">{{ data.serialNumber }}</td>
    <td nzAlign="center" nzRight="0">{{ data.variableDescrible }}</td>
  </ng-template> -->
  <!-- TODO：整个td模板 end -->

  <!-- TODO：单个td模板处理 start -->
  <!-- ! 单个td做处理，其他td按照字段名称直接显示 [tdTemplateList]="{errorCode:errorCode,remark:remark}" tdTemplateList属性传递模板-{key,value;...} key:对应接口返回的字段名 value 模板名称-->
  <ng-template #errorCode let-data="tableData" let-row="rowData" let-index="index" let-key="rowKey">
    <span style="color:red">{{data}}-yes</span>
  </ng-template>
  <ng-template #remark let-data="tableData">
    <span style="color:green">{{data}}-no</span>
  </ng-template>
  <!-- TODO：单个td模板处理 end -->

  <!-- TODO：展开模板 start -->
  <!-- ! 配合tableOptionSetting.expand = true，[expandTemplate]="expandTemplate"-->
  <ng-template #expandTemplate let-index="index" let-data="rowData" let-key="rowKey">
    <td [colSpan]="6">展开内容{{data.name}}</td>
  </ng-template>
  <!-- TODO：展开模板 end -->

</app-my-table>

模板接收参数详情

使用 let-自定义名称 = "接收变量"

• tdTemplate 传递整个td 接收变量如下↓
  1. tableData <当前行数据>
  2. index <当前行索引>
• tdTemplateList 传递单个td 接收变量如下↓
  1. tableData <当前单元格数据>
  2. index <当前行索引>
  3. rowData <当前行数据>
  4. rowKey <配置key时指定的，当前行唯一值>
• expandTemplate 传递展开模板 接收变量如下↓
  1. rowData <当前行数据>
  2. index <当前展开行索引>
  3. rowKey <配置key时指定的，当前行唯一值>

• javascript:

  @ViewChild('table', { static: false }) table: any;
tableHTTPSetting: any = {
  url: '/admin/getPage',
  params: {
    equipmentType: "1",
    queryColumn: "equipment_code",
  },
}

tableOptionSetting: any = {
    // headOption: ['设备ID', '设备名称', '序列号', '备注', '备注', '备注', '备注'], //普通表头
    // headOption: [
    //   [
    //     {title:'name',row: 4},
    //     {title:'other',col: 4},
    //     {title:'Company',col: 2},
    //     {title:'Gender',row: 4},
    //   ],
    //   [
    //     {title:'Age',row: 3},
    //     {title:'Address',col: 3},
    //     {title:'Company Address',row: 3},
    //     {title:'Company title',row: 3},
    //   ],
    //   [
    //     {title:'Street',row: 2},
    //     {title:'Block',col: 2},
    //   ],
    //   [
    //     {title:'Building'},
    //     {title:'Door No.'},
    //   ],
    // ], //合并表头

    headOption: [
      [
        {title:'设备ID',width:200,left:true,},
        {title:'设备名称'},
        {title:'序列号'},
        {title:'备注'},
        {title:'日期'},
        {title:'时间戳'},
        {title:'设备ID',right:true,width:200},
      ],
    ],
    bodyOption:[
      {dataIndex:'equipmentId',width:200,left:true},
      {dataIndex:'equipmentName'},
      {dataIndex:'errorCode',func:(data,row)=> data == 1 ? '正常' : '停止' },
      {dataIndex:'remark'},
      {dataIndex:'sampleTimeStr'},
      {dataIndex:'sampleTime'},
      {dataIndex:'equipmentId',right:true,width:200},
    ],
    checkBox: true,
    key: 'equipmentId',
    // scroll:{y:'200px',x:'800px'},
    scroll:{x:'1500px'},
    size: 'default',
    sort: true,
    title:'报警管理title123',
    headFilter: true,
    expand: true,
    page: false
  }

接口分页参数 及 响应数据说明：

• 分页参数默认为pageSize， pageIndex 不需要在tableHTTPSetting.params 中传递。
• 响应 数据 如下

  {
    code: 0,
    count: 7,
    data: [],
    msg: "查询成功",
    success: true
  }

app-my-table 方法：

| 方法名 | 说明 | 参数 | | ----------------- | ----------------------------------- | ---------------- | | (successCallBack) | 返回接口响应的数据 | function($event) | | (trClick) | 点击tr行 获取该条行数据 | function($event) | | (getCheckedList) | 点击checkbox 获取多选框选中所有数据 | function($event) |

app-my-table 属性：

| 属性 | 说明 | 类型 | 是否必填 | | ------------------ | ------------------------------------------------------- | ----------- | -------- | | tableHTTPSetting | 请求后台接口所需的地址和参数配置 （详情见下文） | object | 是 | | tableOptionSetting | table功能/样式配置 （详情见下文） | object | 是 | | toolbarTemplate | 页头右侧自定义工具栏 | ng-template | 否 | | tdTemplateList | 单个td做处理，其他td按照字段名称直接显示 | ng-template | 否 | | tdTemplate | 传递整个td模板， tdTemplate 存在时 tdTemplateList 无效 | ng-tamplate | 否 | | expandTemplate | 展开列模板，需要tableOptionSetting.expand = true | ng-tamplate | 否 |

tableHTTPSetting 详情：

| 属性 | 说明 | 类型 | 是否必填 | | ------ | ------------------------------------------------- | ----------------------------- | -------- | | url | 请求后台接口地址 | string | 是 | | params | 请求接口携带参数 （每种参数类型请求方式各有不同） | object | string | undefined | 否 |

tableOptionSetting 详情：

| 属性 | 说明 | 类型 | 是否必填 | 默认值 | | ---------- | -------------------------------------------------------------------------------- | --------------- | -------- | --------- | | key | table每行数据唯一值字段名， 如：id （处理多选，展开列 需要使用） | string | 是 | | headOption | 表头 （详情见下文） | object | array | 是 | | bodyOption | 表体 （详情见下文） | object | 是 | | checkBox | 是否展示table多选 | boolean | 否 | false | | size | table排版大小 'middle' | 'small' | 'default' | string | 否 | 'default' | | scroll | 固定头或列 {x?: '*px',y?: '*px'} | object | 否 | | sort | 是否显示序号 | boolean | 否 | false | | page | 是否显示分页 | boolean | 否 | true | | title | 标题 | string | 否 | '' | | headFilter | 是否显示table表头筛选,显示隐藏部分列 (单行头部&非全模板td 才可显示筛选头部工具 ) | boolean | 否 | false | | expand | 展开行 | boolean | 否 | false |

tableOptionSetting.headOption 详情：

1. array类型 - 普通表头

   tableOptionSetting = {
     headOption: ['设备ID', '设备名称', '序列号', '备注', '备注', '备注', '备注'], //普通表头
    //其他配置
     ... 
   }

2. object类型 - 复杂类型

   说明：title:表头文字，row：table的rowspan属性， col: table的colspan属性， width: 宽度单位px，left：向左固定， right： 向右固定

   • 合并单元格 row col使用。

     tableOptionSetting = {
       headOption: [
             [
               {title:'name',row: 4},
               {title:'other',col: 4},
               {title:'Company',col: 2},
               {title:'Gender',row: 4},
             ],
             [
               {title:'Age',row: 3},
               {title:'Address',col: 3},
               {title:'Company Address',row: 3},
               {title:'Company title',row: 3},
             ],
             [
               {title:'Street',row: 2},
               {title:'Block',col: 2},
             ],
             [
               {title:'Building'},
               {title:'Door No.'},
             ],
       ]
       //其他配置
       ...
     }

   • 固定左右列 left right widht使用 需要配合tableOptionSetting.scroll

     tableOptionSetting = {
       headOption: [
         [
           {title:'设备ID',width:200,left:true,},
           {title:'设备名称'},
           {title:'序列号'},
           {title:'备注'},
           {title:'日期'},
           {title:'时间戳'},
           {title:'设备ID',right:true,width:200},
         ],
       ],
       //其他配置
       ...
     }

tableOptionSetting.bodyOption 详情：

说明：dataIndex:接口返回字段名， width: 宽度单位px，left：向左固定， right： 向右固定, func（data,row）：函数渲染，data当前字段，row当前行字段

    tableOptionSetting = {
      bodyOption:[
        {dataIndex:'equipmentId',width:200,left:true},
        {dataIndex:'equipmentName' },
        {dataIndex:'errorCode',func:(data,row)=> data == 1 ? '正常' : '停止'},
        {dataIndex:'remark'},
        {dataIndex:'sampleTimeStr'},
        {dataIndex:'sampleTime'},
        {dataIndex:'equipmentId',right:true,width:200},
      ],
      //其他配置
      ...
    }