Vue-Element中结合后台的特定的数据给实现考勤表格

Vue-Element中结合后台的特定的数据给实现考勤表格

思路

• 草图设计
  • 
• 结果页面
  • 

实现中 卡住 的地方

• 动态列增加
• 单元格动态增加新的表格
• 动态增加的列与对应的数据显示

解决方案

• 动态增加
  • 固定列的数据重新赋值，动态列的数据push进去
• 单元格动态增加新的表格
  • 单元格templete化，新增:data和是否有数据和在特定的列位置添加新的表格
• 动态增加的列与对应的数据显示
  • 数据结构的选择
    1. pojo反射进行添加【可以尝试使用，但不建议】
    2. 采用Map>数据结构【建议使用这种方式】

具体代码片段或数据格式【这个只是思路；具体的细节不用太在意--如$t这个（这个是国际化用的）】

• 表格

• 固定列数据

  tableLabel: [{
    prop: 'face_name',
    width: 120,
    fixed: true,
    label: this.$t("check_work.name"),
  }, {
    prop: 'face_tag',
    width: 120,
    fixed: true,
    label: this.$t("check_work.face_tag"),
  }, {
    prop: 'identity_name',
    width: 120,
    fixed: true,
    label: this.$t("face.dialog_person_info_type"),
  }, {
    prop: 'work_days',
    width: 100,
    label: this.$t("check_work.work_days"),
  }, {
    prop: 'work_off_days',
    width: 100,
    label: this.$t("check_work.work_off_days"),
  }, {
    prop: 'out_time_nums',
    width: 100,
    label: this.$t("check_work.out_time_nums"),
  }, {
    prop: 'early_time_nums',
    width: 100,
    label: this.$t("check_work.early_time_nums"),
  },],
  

• 动态列数据【在异步请求完成之后进行操作】

      if (data.model.push_dates != null && data.model.push_dates.length > 0) {
        for (let i = 0; i < data.model.push_dates.length; i++) {
          self.tableLabel.push(data.model.push_dates[i]);
        }
      }
  

整个表格的数据结构

{
    "code": 200,
    "model": {
        "total": 4,
        "push_dates": [{
            "prop": "day_datas.2019-12-09",
            "width": 150,
            "label": "2019-12-09"
        }, {
            "prop": "day_datas.2019-12-10",
            "width": 150,
            "label": "2019-12-10"
        }],
        "datas": [{
            "face_name": "白鹏2",
            "face_tag": "test002",
            "identity_name": "管理",
            "work_days": 0,
            "work_off_days": 0,
            "work_times": 0,
            "out_time_nums": 0,
            "early_time_nums": 0,
            "day_datas": {
                "2019-12-09": [{
                    "start_time": "08:00",
                    "end_time": "09:00",
                    "is_sign": 1
                }]
            }
        }, {
            "face_name": "白鹏1",
            "face_tag": "test001",
            "identity_name": "管理",
            "work_days": 0,
            "work_off_days": 0,
            "work_times": 0,
            "out_time_nums": 0,
            "early_time_nums": 0,
            "day_datas": {
                "2019-12-09": [{
                    "start_time": "08:00",
                    "end_time": "09:00",
                    "is_sign": 1
                }]
            }
        }, {
            "face_name": "白鹏",
            "face_tag": "11",
            "identity_name": "员工",
            "work_days": 0,
            "work_off_days": 0,
            "work_times": 0,
            "out_time_nums": 0,
            "early_time_nums": 0,
            "day_datas": null
        }, {
            "face_name": "白鹏",
            "face_tag": "001",
            "identity_name": "员工",
            "work_days": 0,
            "work_off_days": 0,
            "work_times": 0,
            "out_time_nums": 0,
            "early_time_nums": 0,
            "day_datas": null
        }]
    },
    "message": "操作成功！"
}