基于移动端写的表格之我的笨办法

移动端使用vue，自己写了一个笨笨的表格展示，固定左侧数据

<template>
  <view style="height: 100%">
    <view class="table">
      <view class="thead">
        <view class="th">
          <view class="td" v-for="(item,index) in columns" :key="index">
            <view class="td_wrap">{{item.title}}</view>
            <view class="td_wrap">{{item.day}}</view>
          </view>
        </view>
      </view>
      <view class="t-body">
        <view class="tr"  v-for="(rItem,rIndex) in rowsList">
          <view class="td" v-for="(tdItem,tdItemIndex) in columns">
            <view class="td_wrap">{{rItem[tdItem.key]}}</view>
          </view>
        </view>
      </view>
      <view class="t-footer">
        <view class="th tr-fixed">
          <view class="td">
            <view style="height: 122rpx;text-align: center;line-height: 122rpx;width:110px; border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;">项目</view>
          </view>
        </view>
        <view class="tr tr-fixed"  v-for="(rItem,rIndex) in rowsList">
          <view class="td">
            <view class="td_wrap">{{rItem.quotaNme}}</view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import common from '../../lib/common.js'
  export default {
    name: "table",
    data(){
      return{
        columns:[
          {title:'项目'},
          {title:'星期一',day:'2020-02-11'},
          {title:'星期二',day:'2020-02-12'},
          {title:'星期三',day:'2020-02-13'},
          {title:'星期四',day:'2020-02-14'},
          {title:'星期五',day:'2020-02-15'},
          {title:'本周合计'},
        ],
        tdHeight:'60',
        rowsList:[]
      }
    },
    methods:{
      getDayData(){
        let params={
          day:'2020-02-23'
        }
        common.$ajax({
          url:'/reportDayInfo/queryWeeek',
          method:'post',
          data:params
        }).then((res)=>{
          if(res.code==200){
            this.columns=res.data.columns
            this.rowsList=res.data.rows
          }else{
            this.rowsList=[]
          }
        }).catch((err)=>{})
      },
    },
    onShow(){
      this.getDayData()
    }
  }
</script>

<style scoped>
  .table{
    overflow-x: scroll;
    font-size: 24rpx;
    height: 100%;
  }
  .th{
    display: flex;
    position: relative;
  }
  .th .td .td_wrap{
    width:220rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  .th .td:first-child .td_wrap,.th .td:last-child .td_wrap{
    height: 122rpx;
    line-height: 122rpx;
  }
  .th .td:first-child .td_wrap:last-child,.th .td:last-child .td_wrap:last-child{
     height: 0rpx;
     border:none;
  }
  .tr{
    display: flex;
    position: relative;
  }
  .tr .td .td_wrap{
    width:200rpx;
    height: 60rpx;
    padding:10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    font-size: 24rpx;
  }
  .t-body{
    height:calc(100% - 90rpx);
  }
  .t-footer{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    background: #fff;
    border-right: 1rpx solid #ccc;
  }
</style>