美文网首页
非前后端分离项目 表格没有数据时显示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