本篇介绍页面的样式设计。
1、页面的整体我选用偏黑色的灰色（#1e1e1e），可以在每一页的style中添加 body{ background-color: #1e1e1e; } 2、字体颜色我选用和背景色对比鲜明的偏白色（#fff），可以在每一个有字显示的标签里添加style='color:#fff' 3、这里重点说明element-ui中的展开行里面的颜色如何更改 展开行的样式如下所示： 想要把表格和页面颜色统一需要做如下操作：
<el-table :data="tableData" :header-cell-style="{background:'#1e1e1e',color:'#fff'}" :header-row-style="{background:'#1e1e1e',color:'#fff'}" :row-style="{background:'#1e1e1e',color:'#fff'}" :cell-style="{background:'#1e1e1e',color:'#fff'}" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand" style="color:#fff"> <el-form-item label="日志ID"> <span>{{ props.row.id }}</span> </el-form-item> ……此处省略 </el-form> </template> </el-table-column> <el-table-column label="日志ID" prop="id" width="100"> </el-table-column> <el-table-column label="访问IP" prop="ip"> </el-table-column> <el-table-column label="是否异常" prop="result" width="100"> </el-table-column> </el-table> .el-table{ background:#1e1e1e; } .el-table::before { height: 0px; } .el-table__expanded-cell{ background: #1e1e1e; } .el-table th, .el-table tr { background-color: #1e1e1e; }效果如下所示： 表格以此类推。 另外展开表里的样式可以在<style>中如下设置：
.demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 100%; }布局我这里采用了element-ui的布局方案，整体遵循左边显示图表数据，右边显示详细日志信息的原则，采用栅栏布局，示例如下图所示：
<el-row :gutter="15"> <!--graphForFirst和logFlush均为自定义组件--> <el-col :span="12"><graphForFirst></graphForFirst></el-col> <el-col :span="12"><logFlush/></el-col> </el-row>效果如下图所示：
这里我需要重点强调以下滚动条的配置，因为这个困扰了我好长时间。 我们知道页面的原滚动条是这样的： 这与我们设计页面不搭，显得过于突兀，而像现在正在写博客的的markdown编辑器的滚动条样式就非常好看，而element-ui的样式也非常好，举例如下：
<el-col :span="14"> <div style="height:630px"> <el-scrollbar style="height:100%" ref="elScrollBar"> <div> <自定义组件> </div> </el-scrollbar> </div> </el-col> <style> .el-scrollbar__wrap { overflow-x: hidden;/*隐藏横向滚动轴*/ } </style>效果如下所示：
相比于其他组件的前端设计，实时日志流的显示比较棘手。 这里我的做法是在redis里存储最新的一次日志，然后前后端通过websocket不断返回该值，并且判断该值是否和上一值是否相等，如果相等则不添加到前端页面，不相等则添加到dom中，如下所示：
mounted(){ var namespace = '/theLogFlush'; //this.socket = io.connect(location.protocol + '//' + document.domain + ':5000' + namespace); this.socket = io.connect(location.protocol + '//localhost:5000' + namespace); var that=this this.socket.on('theLogFlush', function(res) { console.log(res.data); if(that.msg!=res.data){ that.msg=res.data document.getElementById('log').innerText+=res.data document.getElementById('log').innerHTML+='<br/>' that.updateScroll() } }); }效果如下： 并且在日志流不断添加的过程中我们要保证滚动条是跟随滚动的，可以这样做：
<el-scrollbar style="height:100%" ref="elScrollBar"> <div> <h5 id="log" style="color:green">实时访问日志……<br></h5> </div> </el-scrollbar> methods:{ //使滚动条时时跟上 updateScroll(){ this.$refs['elScrollBar'].wrap.scrollTop = this.$refs['elScrollBar'].wrap.scrollHeight } }