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