代码:
<div class="step1">
<div class="chosetitle">1.选择抽屉</div>
<!-- drawer_area 抽屉区 -->
<div class="drawer_area">
<div
class="row"
:class="nowDrawId == item.id ? 'active' : ''"
v-for="(item, index) in machineItemList"
:key="index"
@click="toggleNowDrawId(item.id)"
>
<!-- 选中了某一行时显示右箭头 -->
<div
class="row_arrow el-icon-right"
v-if="nowDrawId == item.id"
></div>
<div
class="col"
:class="{ have: item.status == '1', none: item.status == '2' }"
v-for="(item1, index1) in item.child"
:key="index1"
>
{{ item1.id }}
</div>
</div>
</div>
created() {
this.getMachineItemList()
},
methods: {
//获取药箱布局 假设为9行*3列
getMachineItemList(){
let arr=[];
for(let i=0;i<9;i++){
//设置每一行的属性
let rowObj={
id:i+1,
child:[]
};
for(let j=0;j<3;j++){
//设置每一列的属性
let colObj={
id:(i+1)+'-'+(j+1)
}
//push为数组方法,增加一个项
rowObj.child.push(colObj)
}
arr.push(rowObj)
}
console.log(arr)
this.machineItemList=arr;
},
//当某一列被点击后,选中该行
toggleNowDrawId(id) {
this.nowDrawId = id;
},
},
};
> .drawer_area {
.row {
//行布局
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
position: relative;
> .row_arrow {
display: none;
position: absolute;
left: -30px;
top: 10px;
}
&:last-child {
margin-bottom: 0;
}
&:hover,
&.active {
> .row_arrow {
display: block;
}
}
.col {
width: 88px;
height: 44px;
background: rgba(231, 211, 49, 1);
&.have {
background: rgba(32, 159, 133, 1);
}
&.none {
background: rgba(90, 134, 239, 1);
}
}
}
}