Vue mobile terminal vant's layout layout van-row, van-col realizes table form with background color

Currently only suitable forNumber of columnsFewer, there is no table with horizontal scrolling, and it will be improved if there are ideas in the future

renderings

1. Page realization

<div class="table-box">
  <van-row class="th-row">
    <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
      {
   
   {warn}}
    </van-col> 
  </van-row>
  <van-row class="tb-row" v-for="(wb,index) in dataList.tbData" :key="index" 
  :style="{background:index % 2 === 0 ?'#fff':'#F4F9FE'}">
    <van-col :span="24/Object.keys(wb).length" v-for="item in Object.keys(wb)" :key="item">{
   
   {wb[item]}}</van-col>
  </van-row>
</div>

2. Data

export default{
    
    
	data(){
    
    
		return{
    
    
			dataList:{
    
    
	        title:['部门','姓名','年龄'],
	        tbData:[
	          {
    
    depart:'皇城司',name:'千帆',age:'23'},
	          {
    
    depart:'商铺',name:'池衙内',age:'45'},
	          {
    
    depart:'琵琶行',name:'引章',age:'12'}
	        ]
	      }
		}
	}
}

3. The style part is less

.table-box{
    
    
   margin: 12px 0px;
   .th-row{
    
    
     height: 56px;
     line-height: 56px;
     background: #EBF1F7;
     padding: 0px 12px;
   }
   .tb-row{
    
    
     height: 56px;
     line-height: 56px;
     padding: 0px 12px;
   }
 }

I'm Tudou, see you next time!