目录

• 需求 - 要实现的效果
• 初始代码
• 代码升级（可供多个表格使用）
• • `CommonTable.vue 子组件 `
  • 使用子组件1 - `父组件 - 图1~图3使用`
  • • 效果展示
    • 使用子组件2 - `父组件 - 图4使用`
    • • 效果展示
      • 注意
      • 【代码优化 - 解决bug】

        需求 - 要实现的效果

        父组件中 info 数据示例

        const info = {
          itemMap: {
            警告: [
              {
                total: 28,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '12',
                wfxlView: '超速行驶',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 3,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '17',
                wfxlView: '未低速通过',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 6,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '26',
                wfxlView: '违法停车',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 21,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '28',
                wfxlView: '违法装载',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 3,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '49',
                wfxlView: '其他影响安全行为',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 1,
                cfzl: '1',
                cfzlView: '警告',
                wfxl: '28',
                wfxlView: '违法装载',
                jtfs: 'B21',
                jtfsView: '中型栏板半挂车'
              }
            ],
            罚款: [
              {
                total: 56,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '12',
                wfxlView: '超速行驶',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 6,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '17',
                wfxlView: '未低速通过',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 12,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '26',
                wfxlView: '违法停车',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 42,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '28',
                wfxlView: '违法装载',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 6,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '49',
                wfxlView: '其他影响安全行为',
                jtfs: 'B11',
                jtfsView: '重型栏板半挂车'
              },
              {
                total: 2,
                cfzl: '2',
                cfzlView: '罚款',
                wfxl: '28',
                wfxlView: '违法装载',
                jtfs: 'B21',
                jtfsView: '中型栏板半挂车'
              }
            ]
          },
          columns: [
            {
              // total: 28,
              // cfzl: '1',
              // cfzlView: '警告',
              // wfxl: '12',
              // wfxlView: '超速行驶',
              jtfs: 'B11',
              jtfsView: '重型栏板半挂车'
            },
            {
              // total: 1,
              // cfzl: '1',
              // cfzlView: '警告',
              // wfxl: '28',
              // wfxlView: '违法装载',
              jtfs: 'B21',
              jtfsView: '中型栏板半挂车'
            }
          ]
        }
        

        初始代码

        父组件

        CommonTable.vue 子组件

        代码升级（可供多个表格使用）

        图1

        图2

        图3

        图4

        根据接口返回数据不同（数据格式一致，只是部分字段名不一致），向子组件传入不同的字段名。

        CommonTable.vue 子组件

        使用子组件1 - 父组件 - 图1~图3使用

        效果展示

        使用子组件2 - 父组件 - 图4使用

        效果展示

        注意

        • 使用子组件1 和 使用子组件2 中 info 数据不同

          【代码优化 - 解决bug】

          解决数据重复问题

          【注】计算小计插入位置等部分方法参考文章 https://blog.csdn.net/seeeeeeeeeee/article/details/133122424