通过VUE封装时间表格

<template>

<div class="Tablecenter">

    <div class="TableCON">

        <table class="Table1">

            <thead>

                <tr class="Table1thhedad">

                    <td>姓名</td>

                    <td>当前班级</td>

               </tr>

            </thead>

            <tbody>

                 <tr v-for="item in DataList" :key="item.id">

                    <td>{{item.name}}</td>

                    <td>{{item.school}}</td>

               </tr>

            </tbody>

           

        </table>

        <table class="Table">

            <thead>

                <tr>

                    <td v-for="(item) in date[CurrentMonth]" :key="item" class="ant-table-bordered">

                    {{CurrentMonth +1}}月{{item}}日

                    </td>

               </tr>

            </thead>

            <tbody v-if="DataList.length>0">

               <tr v-for="(data) in DateData" :key="data.id" >

                   <td v-for="item in  date[CurrentMonth]" :key="item" class="ant-table-bordered">

                      {{RecordData(data,item)}}

                   </td>

               </tr>

            </tbody>

            <div v-else class="NoData">

                   暂无数据

            </div>

        </table>

    </div>

</div>

</template>

<script>

export default {

    props:{

        DataList:{

            type:Array,

        default:()=>{

            return [

                {

                    id:1,

                    name:"姓名",

                    school:"1402班",

                    dataList:[

                        {

                            id:1,

                            key:1,

                            value:'1515'

                        }

                    ]

                }

            ];

        }

        }

    },

   data () {

       return {

           date:[31,28,31,30,31,30,31,31,30,31,30,31],

           month:''

       }

   },

   computed:{

       CurrentMonth:function(){

           let Data = new Date();

           return Data.getMonth();

       },

       DateData:function(){

          return this.DataList.map(item=>{

              return item.dataList;

          })

       },

       RecordData(){

           return (data,item)=>{

              let sub = data.filter(i=>{

                   return i.key === item;

               })

               console.log(sub);

               if(sub.length >0){

                   return sub[0].value

               }else{

                   return ''

               }

           }

       }

       }

   }



</script>

<style lang="less" scoped>

.Tablecenter{

    position: relative;

    .NoData{

          position: absolute;

          top: 50%;

          left: 50%;

          transform: rotate3d(-50%,-50%);

      }

}

   .TableCON{

       display: flex;

       width: 100%;

       height: 360px;

       overflow: auto;

       border: 1px solid #ccc;

       border-top: none;

   }

   .Table{

       margin-left: 340px ;

       width: 1400px;

       table-layout: fixed;

         background: #fff;

       tr{

           td{

               text-align: center;

               border: 1px solid #ccc;

               width: 80px;

           }

       }

       .ant-table-bordered{

           padding: 8px 8px;

          

       }

   }

.Table1{

    position: absolute;

    top: 0;

    left: 0;

    width: 340px;

    background: #fff;

    z-index: 1;

     .Table1thhedad{

         td{

 padding: 8px 8px;

         }

           

        }

    tr{

        td{

            border: 1px solid #ccc;

               padding: 7.2px 8px;

            

        }

      

    }

}

</style>