美文网首页
iview-admin采坑记

iview-admin采坑记

作者: cooqi | 来源:发表于2019-07-15 16:42 被阅读0次

    1.因为端口冲突,把端口更改后,发现控制台network发送一些失败的请求

    TIM截图20190715164154.jpg

    可以看到端口还是默认的8080,但端口我已经改成8090;就有点不解了,百度后知道方法: npm dev server后再次运行即可

    这个问题:如果是在开发环境,应该是开发的时候网络环境变更导致,比如你切换无线网络,导致开发服务器的IP地址换了,这样开发服务器会不知道如何确定访问源。开发环境中关闭npm dev server,然后重新npm run serve重新构建服务环境就可以了。
    如果是生产环境,很大可能是应该是域名和ip映射出问题,重启node,检查重新配置域名和ip映射就可以了。
    参考https://segmentfault.com/q/1010000005045512/a-1020000006188232

    2.table设置了宽高,但是,数据超出时并没有出现滚动条

    需要给table动态设置高度

    <Table :height="tableHeight" border :columns="columns" :data="people_data" >
    //当数据渲染完后,给tableHeight重新赋值,可以是固定的值,也可以是计算出来的值
    this.tableHeight='378' //or window.innerHeight-257
    
    //如果做了一屏响应式,要在mounted里要写上窗口的变化
    window.onresize = function(){ // 定义窗口大小变更通知事件
         _this.tableHeight=window.innerHeight-257
       };
    

    header、面包屑、页码器 的高度是固定的;
    工具栏和搜索区域是不固定的,因为具栏在一个操作权限都没有的时候是看不到的,搜索条件每个界面是不固定的。
    this.$refs.ref.offsetHeight可以获取到元素的高度。
    当界面大小改变时,有window.onresize事件可以监听,在监听事件里重新设置表格的高度即可;
    综合以上四个线索,很容易的就想到了
    table height = window.innerHeight - 搜索区域高度 - 固定高度(header+面包屑) - 工具栏高度;
    参考:https://blog.csdn.net/lvdou1120101985/article/details/88869084

    3.表单数据回显了,但是非空验证没有通过

    TIM截图20190718100025.jpg

    因为官方默认的验证类型是string,这个有点坑啊,年龄的话后台肯定是存了number类型的,总不至于让后台去改吧,那就自己转一遍,或者自己写验证方式

    this.edit_people.age+=''
    

    暂停更新,因为tree和兼容(ie10)的问题,项目选择了element,但我个人还是更喜欢iview的,后续使用会继续记录

    相关文章

      网友评论

          本文标题:iview-admin采坑记

          本文链接:https://www.haomeiwen.com/subject/lfznkctx.html