Vue 모바일 단말기 vant의 레이아웃 레이아웃 van-row, van-col은 배경색으로 테이블 형식을 구현합니다.

현재 만 적합열 수적고, 가로 스크롤이 있는 표는 없고, 추후 아이디어가 있으면 개선하겠습니다.

렌더링

1. 페이지 구현

<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. 데이터

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

3. 스타일 부분이 적다

.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;
   }
 }

투두입니다 다음에 또 만나요!