antd-my-table v1.0.0

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) ： 点击行返回单行数据
   -->

<ng-template #toolbarTemplate> <ngx-commonbutton class="export" jurisdiction="false" buttonName="'导出模板'"> <ngx-commonbutton class="export" jurisdiction="false" buttonName="'123213'">

<ng-template #errorCode let-data="tableData" let-row="rowData" let-index="index" let-key="rowKey"> {{data}}-yes <ng-template #remark let-data="tableData"> {{data}}-no

<ng-template #expandTemplate let-index="index" let-data="rowData" let-key="rowKey">

<td [colSpan]="6">展开内容{{data.name}}</td>

• 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 方法：

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 详情：

tableOptionSetting 详情：

tableOptionSetting.headOption 详情： 1. array类型 - 普通表头

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

2. object类型 - 复杂类型

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

 * 合并单元格 row col使用。
  ``` javascript
    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*
  ``` javascript
    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},
      ],
      //其他配置
      ...
    }