开发中遇到的问题

w3cschool

难题node分享

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方法