1.使用具体数据定高的优势
现在我们布局这样一个简单页面
首先，使用百分比实现的方式：
代码如下： html部分代码<div class="box"> <div class="nav"> </div> <div class="content"> A </div> <div class="btn"> <button style="width:170px;height:60px">按钮</button> </div> </div>CSS部分代码
.content{
background-color: coral;
height: 600px;
width: 80%;
margin: 0 auto;
}
.nav{
margin: 0 auto;
height: 198px;
width: 80%;
background-color: rgb(226, 185, 132);
background-image: url('./assets/header.jpg');
background-repeat: no-repeat;
}
.btn{
text-align: center;
}
这样看似是实现了，但是很不灵活，当我们缩小浏览器的时候，出现了这样的问题
使用具体数据可以解决问题： HTML代码还是原来的 CSS代码里边宽度定成具体的px数值
2.使用el-select绑定后端返回的数据，数据类型比较复杂
"code": 200,
"batchs": [
{
"eventid": "批次1",
"eventname": "场次1",
"day": 30,
"begintime": "2021-08-09 13:08:08",
"overtime": "2020-09-10 13:08:08",
"num": 30,
"overnum": 20,
"bools": true
},
{
"eventid": "批次1",
"eventname": "场次2",
"day": 30,
"begintime": "2021-08-09 13:08:08",
"overtime": "2020-09-10 13:08:08",
"num": 30,
"overnum": 30,
"bools": true
}
]
}
拿到后端返回的数据，showData select绑定的对象数组是 options
先定义一个临时数组，tempArr
遍历后端数据
showData.forEach(element->{//element就是shouData对象
tempArr.push[
{
“value”:element.eventname
num:element.num
overnum:element.overnum
disabled:false //还可以添加其他的我们想要的静态属性
}
]
})
最后再把临时变量给 select绑定的数组 options
optionstempArr
3.接上一个问题，在用户选择完数据之后，向用户展示选中值对应对象的其他值。利用用户当前选的值，作为引子，去遍历当前对象数组。
先给select添加 change事件 getOther
getOther(item){//这里的item默认就是用户选择的值
for(a=0;a<showData.length;a++){
if(item==showData[a]){
this.num=showData[a].num//拿到该对象里我们想要的其它属性
}