美文网首页
非前后端分离项目 表格没有数据时显示nodata 修改方式如下

非前后端分离项目 表格没有数据时显示nodata 修改方式如下

作者: 兰夏天 | 来源:发表于2019-08-27 16:16 被阅读0次

    原因是没有用国际语言设计为中文,由于这不是前后分离的。因此放弃官方推荐的方法。自己写的方法。 为以后页面用的着。定义样式 放在公共样式表中。

    (※1) tablecom.css文件中 添加

     .nodatatable {
        display: block;
        border-bottom: 1px solid #e8e8e8;
        height: 48px;
        line-height: 48px;
        text-align: center;
    }
    
    .isdatashow {
        display: none;
    }
    
    .tablenodata .ant-table-placeholder {
        display: none;
    }     
    

    (※2)在table组件 中添加

    :class="{tablenodata:!dataTable.length}"        
    

    (※3)在table组件后,分页组件前 加

    <div :class="{nodatatable:true,isdatashow:shownodata}"> 没有数据!</div>   
    

    (※4) 在data 中 加

     shownodata: false
    

    (※5) 在watch 监听 中加

      dataTable(val, old) {
                        var that=this                  
                        that.shownodata=val.length
                    }         
    

    相关文章

      网友评论

          本文标题:非前后端分离项目 表格没有数据时显示nodata 修改方式如下

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