kexm: [{
zhuti: 'rgba(253, 175, 73, 1)',
name: '姓名',
data: [{
date: '6.19-6.20',
bianhao: 'dsjh1234',
state: 1,
shichang: '30分钟'
}, {
date: '6.19-6.20',
bianhao: 'dsjh1234',
state: 0,
shichang: '30分钟'
},}]
}, {
zhuti: 'rgba(94, 153, 255, 1)',
name: '性别',
data: [{
date: '6.19-6.20',
bianhao: 'dsjh1234',
state: 1,
shichang: '30分钟'
},]
}, {
zhuti: 'rgba(101, 197, 5, 1)',
name: '年龄',
data: [{
date: '6.19-6.20',
bianhao: 'dsjh1234',
state: 1,
shichang: '30分钟'
},]
}], //html
<view class="two_item" v-for="(item,index) in kexm" key="index">
<view class="ti_top">
<view class="zht" :style="'background-color: '+item.zhuti+';'"></view>
<view class="name">{{item.name}}</view>
</view>
<view class="ti_bot">
<view class="table-header">
<view class="table-cell">aa</view>
<view class="table-cell">bb</view>
<view class="table-cell">cc</view>
<view class="table-cell">dd</view>
</view>
<view class="table-row" v-for="(items,indexs) in item.data" :key="indexs">
<view class="table-cell">{{items.date}}</view>
<view class="table-cell">{{items.bianhao}}</view>
<view class="table-cell">
<span class='state' v-if="items.state == 1" :style="'background-color: '+item.zhuti+';'">开始</span>
<span class='state' v-if="items.state == 0" :style="'background-color: '+item.zhuti+';'">结束</span>
</view>
<view class="table-cell">{{items.shichang}}</view>
</view>
</view>
</view> //css
/ 表格 /
.table-header {
display: flex;
height: 40px;
align-items: center;
font-size: 30rpx;
font-weight: bold;
}
.table-cell {
flex: 1;
text-align: center;
}
.table-row {
display: flex;
height: 40px;
align-items: center;
}
.state {
display: inline-block;
color: #fff;
padding: 10rpx 30rpx;
border-radius: 20rpx;
text-align: center;
}
/ 表格 /
需要实现的效果
未实现的
1***@qq.com (作者)
循环是出来了，但是表格双数的颜色没有跟主体色保持一致
2023-06-27 17:51
1***@qq.com (作者)
我现在没有思路，如何实现？
2023-06-27 17:53
Diligent_UI
回复 1***@qq.com: 背景色没有给到一行的dom身上
2023-06-27 17:56
Diligent_UI
回复 1***@qq.com: 眼瞅着就要下班咯，方便的话可以加我QQ，哈哈，先试试这种方式行不行，主要看控制台上那个background的的那里是不是预期的那样
2023-06-27 17:59
1***@qq.com (作者)
回复 Diligent_UI: 所以应该怎么实现呢？我不知道如何把主题色弄到每个表格中的双数行
2023-06-27 17:59
Diligent_UI
回复 1***@qq.com: 下班了，暂时不能回复了
2023-06-27 18:02
1***@qq.com (作者)
回复 Diligent_UI: 那qq号是？
2023-06-27 18:06
Diligent_UI
回复 Diligent_UI: 看我头衔呀
2023-06-28 10:46
Diligent_UI
回复 1***@qq.com: 问题咨询请加QQ群：120594820
2023-06-28 10:48