vue嵌套列循环生成考勤表数据

如图



接口返回数据格式:

```

{

    "total": 1,

    "rows": [

        {

            "name": "钟伟清",

            "employeeID": "25016",

            "paidForDay": 0,

            "workDay": 0,

            "holidayWorkDay": 0,

            "holidayWithPayDay": 0,

            "shouldBeAttendanceDay": 0,

            "errandDay": 0,

            "lateCount": 0,

            "leaveEarlyCount": 0,

            "absenteeismDay": 0,

            "sickLeaveDay": 0,

            "affairLeaveDay": 0,

            "vacationDay": 29,

            "takeWorkOffDay": 0,

            "annualLeaveDay": 0,

            "maternityLeaveDay": 0,

            "funeralLeaveDay": 0,

            "marriageLeave": 0,

            "extraWorkHour": 0,

            "supplementCount": 0,

            "lateChangedCount": 0,

            "daySisuation": [

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休",

                "休休"

            ],

            "goOutDay": 0

        }

    ]

}

```


传值组装transfer数组

// 初始化数据的表头

```

        changeFromat(start,daycount,year,toMonth,end,shortName){

            var empty =[]

            for(var i=start; i<=daycount; i++){

                var current = year + '-' + toMonth + '-' + i;

                var weekday = new Date(current).getDay();

                var text = "";

                switch (weekday) {

                    case 0:

                        text = "日";

                        break;

                    case 1:

                        text = "一";

                        break;

                    case 2:

                        text = "二";

                        break;

                    case 3:

                        text = "三";

                        break;

                    case 4:

                        text = "四";

                        break;

                    case 5:

                        text = "五";

                        break;

                    case 6:

                        text = "六";

                        break;

                }

                var thisDay = String(i)

                var emp = {

                    day:thisDay,

                    week:text

                }

                empty.push(emp)

            }


            for(var i=1; i<=end; i++){

                // i = i > 9 ? i : '0' + i;

                var current = year + '-' + shortName + '-' + i;

                var weekday = new Date(current).getDay();

                var text = "";

                switch (weekday) {

                    case 0:

                        text = "日";

                        break;

                    case 1:

                        text = "一";

                        break;

                    case 2:

                        text = "二";

                        break;

                    case 3:

                        text = "三";

                        break;

                    case 4:

                        text = "四";

                        break;

                    case 5:

                        text = "五";

                        break;

                    case 6:

                        text = "六";

                        break;

                }

                var thisDay = String(i)

                var emp = {

                    day:thisDay,

                    week:text,

                }

                empty.push(emp)

            }

            this.transfer = empty

        },

```


将transfer数组绑定至el-table表单

el-table表单代码

```

<el-table id="out-table" :data="tableData"  border :header-cell-style="{background:'#eef1f6',color:'#606266'}"   align="center">

                <el-table-column prop="name" label="姓名"></el-table-column>

                <el-table-column prop="employeeID" label="工号"></el-table-column>

                <el-table-column prop="paidForDay" label="计薪(天)"></el-table-column>

                <el-table-column prop="workDay" label="上班(天)"></el-table-column>

                <el-table-column prop="holidayWorkDay" label="节日上班(天)"></el-table-column>

                <el-table-column prop="holidayWithPayDay" label="节日带薪(天)"></el-table-column>

                <el-table-column prop="shouldBeAttendanceDay" label="应出勤(天)"></el-table-column>

                <el-table-column prop="errandDay" label="出差(天)"></el-table-column>

                <el-table-column prop="lateCount" label="迟到(次)"></el-table-column>

                <el-table-column prop="leaveEarlyCount" label="早退(次)"></el-table-column>

                <el-table-column prop="absenteeismDay" label="旷工(天)"></el-table-column>

                <el-table-column prop="sickLeaveDay" label="病假(天)"></el-table-column>

                <el-table-column prop="affairLeaveDay" label="事假(天)"></el-table-column>

                <el-table-column prop="vacationDay" label="休假(天)"></el-table-column>

                <el-table-column prop="takeWorkOffDay" label="调休(天)"></el-table-column>

                <el-table-column prop="annualLeaveDay" label="年假(天)"></el-table-column>

                <el-table-column prop="maternityLeaveDay" label="产假(天)"></el-table-column>

                <el-table-column prop="maternityLeaveDay" label="丧假(天)"></el-table-column>

                <el-table-column prop="extraWorkHour" label="加班(天)"></el-table-column>

                <el-table-column prop="lateChangedCount" label="已用改卡(次)"></el-table-column>

                <el-table-column prop="supplementCount" label="已审核通过补卡(次)"></el-table-column>

                <el-table-column v-for="(item, index) in transfer" :label="item.day" width="40">

                    <el-table-column  :label="item.week" width="40">

                        <template slot-scope="scope">

                                <span>{{scope.row.daySisuation[item.day-1]}}</span>

                        </template>

                    </el-table-column>

                </el-table-column>

            </el-table>


```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,932评论 0 13
  • <template> <el-row type="flex" class="row-bg ...
    南漂一枚阅读 433评论 0 0
  • @[TOC](关于循环表格高亮展示的问题) 在项目中,难免会遇到一个页面会展示多个表格,下面以elementui的...
    minusplus阅读 1,164评论 0 2
  • 最近在做项目遇见了一个后端返回数据结构跟前端element中的多级列表数据结构相似、但是在官网上没看见相类似的案例...
    chaokun阅读 1,505评论 0 0
  • 今晚看到儿子写的日记忍不住笑出了声,吃了人家一口武大郎高兴了一整天,还买了心爱的玩具给同学玩了一天,这同学间的友谊...
    李宇航妈妈阅读 121评论 0 0

友情链接更多精彩内容