前提：现成的框架里，table的组件，都是很简单的。遇到复杂的业务时，很多都是不满足的。

- 支持表头和表格body分组（自定义配置）
- 支持表格左右滑动（可自定义配置表格固定列）
- 支持点击事件

/*==================mock start =====================*/
//简单的数据结构
const headData = [
  { title: '截止日期', key: 'time', hasClick: true},
  { title: '是否经过审计', key: 'isSJ', hasClick: true},
  { title: '审计日期', key: 'sjTime', align: 'right', hasClick: true},
]
const data = [
  {time: '2020/3/31', isSJ: '未审计', sjTime: '2020/02/02'},
  {time: '2020/3/31', isSJ: '已审计', sjTime: '2020/02/02'},
  {time: '2020/3/31', isSJ: '未审计', sjTime: '2020/02/02'},
]
// 固定列，左右滚动的table，可点击修改
const data2 = [
  {name: '财务报表截止日期', column1: '2020/01/02', column2: '2020/01/02', column3: '2020/01/02', column4: '2020/01/02'},
  {name: '是否经过审计', column1: '未审计', column2: '未审计', column3: '已审计', column4: '已审计'},
  {name: '审计日期', column1: '2020/01/02', column2: '2020/01/02', column3: '2020/01/02', column4: '2020/01/02'},
  {name: '财务报表类型', column1: '1', column2: '1', column3: '2', column4: '2'},
]
const headData2 = [
  {
    title: {
      '@item': {
        title: [
          { title: '截止日期' },
          { title: '指标' }
        ],
        titleClass: 'lineTd'
      }
    },
    key: 'name',
    width: '260',
    sticky: true,
  },
  {
    title: '2020/01/02',
    key: 'column1',
    width: '200',
    hasClick: true
  },
  {
    title: '2020/01/03',
    key: 'column2',
    width: '200',
    hasClick: true
  },
  {
    title: '2020/01/04',
    key: 'column3',
    width: '200',
    hasClick: true
  },
  {
    title: '2020/01/05',
    key: 'column4',
    width: '200',
    hasClick: true
  },
]

const mock2 = {
  headData: ["2021-12-31", "2021-12-30", "2021-12-29", "2021-12-29"],
  data: [
    {
      code: 'a',
      name: '经营活动产生的现金流量',
      value: [],
      isLevel1: true,
      isEdit: false,
    },
    {
        code: 'a1',
        name: '销售商品',
        value: ['a1v', 'a2v', 'a3v', 'a4v'],
        isLevel1: false,
      },
      {
        code: 'a2',
        name: '提供劳务收到的现金',
        value: ['a1v', 'a2v', '提供劳务收到的现金', 'a4v'],
        isLevel1: false,
      },
      {
        code: 'a3',
        name: '提供劳务收到的现金',
        value: ['a1v', 'a2v', 'a3v', 'a4v'],
        isLevel1: false,
      },
    {
      code: 'b',
      name: '经营活动产生的现金流量',
      value: ['', '', '', ''],
      isLevel1: true,
      isEdit: true,
    },
    {
        code: 'b1',
        name: '销售商品',
        value: ['b1v', null, 'b3v', 'b4v'],
        isLevel1: false,
      },
      {
        code: 'b2',
        name: '提供劳务收到的现金',
        value: ['b1v', 'b2v', 'b3v', 'b4v'],
        isLevel1: false,
      },
      {
        code: 'b3',
        name: '提供劳务收到的现金',
        value: ['b1v', 'b2v', 'b3v', 'b4v'],
        isLevel1: false,
      },
  ]
}
/*==================mock end =====================*/

//tableInst, tableInst2 由aotoo封装的table组件调用方式(图一) 正常的table返回数据构成
//tableInst3, tableInst4 由wxml封装的table组件调用方式(图二) 正常的table返回数据构成
//tableInst5 纯wxml构成(图三) 非正常的table返回数据构成

Pager({
  data: {
   tableInst: tableList({
      headData: headData,
      data: data,
      tableClass: 'border mb-default',
      // isHideHeader: true,
      // unit: '%',
      autoWidth: true
    }),
   tableInst2: Pager.item({}),
   tableInst3: null,
   tableInst4: null,
   tableInst5: null,
 },
 onReady() {
    const $tableInst2 = this.getElementsById('tableInst2')
    this.$modal = this.getElementsById('modal')
    this.vm = null
    const that = this
    const inst = tableList({
        headData: headData2,
        data: data2,
        tableClass: 'auto border sticky mb-default',
        onItemClick(params) {
          that.vm = this      // 组件内部的this
          that.openModal(params)
        },
      })
   $tableInst2.update(inst)
   this.setData({
      tableInst3: {
        headData: headData,
        data: data,
        tableClass: 'border auto mb-default',
      },
      tableInst4: {
        headData: headData3,
        data: data3,
        tableClass: 'border auto mb-default',
        onItemClick(params) {
          const {idx, key, value} = params
          const dt = this.data.data
          const abc = that.filterClas(dt, params)
          this.setData({data: abc})
          that.vm1 = this
          that.openModal(params, 1)
        },
      },
      tableInst5: {
        headData: mock2.headData,
        data: mock2.data
      },
    })
 }
})

图一：

图二：

图三:

效果：