vue移动端vant的layout布局van-row,van-col实现带背景色table表格
vue移动端vant的layout布局van-row,van-col实现带背景色table表格
·
目前只适合列数较少,没有横向滚动的表,后续有想法再完善
效果图
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、样式部分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;
}
}
我是土豆,下次见!
更多推荐
已为社区贡献5条内容
所有评论(0)