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

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

思路

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

实现中 卡住 的地方

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

解决方案

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

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

• 表格

    <el-table
      border
      :data="checkData"
      style="width: 100%;">
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :fixed="item.fixed"
        :prop="item.prop"
        :width="item.width"
        :label="item.label">
        <template slot-scope="scope">
          {{getDataName(scope.row,item.prop)}}
          <el-table :data="scope.row.day_datas[item.prop]"
                    v-if="scope.row.day_datas!=null&&index>6&&scope.row.day_datas[item.prop]!=null">
            <el-table-column
              prop="start_time"
              width="110"
              :label="$t('check_work.sign_start_time')">
            </el-table-column>
            <el-table-column
              prop="end_time"
              width="110"
              :label="$t('check_work.sign_end_time')">
            </el-table-column>
            <el-table-column
              prop="is_sign"
              width="80"
              :label="$t('check_work.is_sign')">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  

• 固定列数据

  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": "操作成功！"
}