1 element框架 实现 固定宽度 + 动态宽度
<el-container style="text-align: center;color: white;">
<el-aside width="200px" style="background:red;height: 100px;">固定宽度</el-aside>
<el-container style="background:blue;">
三个中 谁最长总体高度就是谁
</el-container>
<el-aside width="200px" style="background:red;">固定宽度</el-aside>
</el-container>
实现效果是
2 element框架 实现 响应式布局
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<div class="grid-content bg-purple"></div>
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<div class="grid-content bg-purple-light"></div>
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<div class="grid-content bg-purple"></div>
</el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<div class="grid-content bg-purple-light"></div>
</el-col>
</el-row>
<el-row>
{{width}}
</el-row>
//使用js动态生成width 并渲染
window.onresize = () => {
this.width = document.body.clientWidth;
}
3 hash模式下共用一个表格,频繁切换tab导致出现 异步问题
使用同一个axios 参数不一样 返回的结果不同 但是其赋值给的是同一个数据对象
如 dataList 切换第一个页面 接口还没有返回 立马切换第二个页面 但是第二个接口立马请求完毕了,但是第一个接口还没有请求完成 导致 第二个页面渲染的是 第一个页面的数据 。
解决的方法是
因为给 axios 传什么参数 ,接口就会返回什么参数 一 一对应
所以在接口返回数据时候做出判断
if(this.actPlate == res.path ){
this.dataList=res.data
}
因为接口慢 所以为出现这个问题 甚至数据的排序都是前端做的 用到的是数组的 sort方法