element表格样式优化

1、表格的两种形式

2、根据官方文档写自己的表格

<div><el-card><div class="title">1.基本数据展示</div><el-table v-loading="loading" :data="basicData" header-cell-class-name="basic_header" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }"><el-table-column prop="month" align="center" label="月份" /><el-table-column prop="total_releases" align="center" label="总发布数" /><el-table-column align="center" label="紧急版本"><el-table-column prop="total" align="center" label="发布总数" width="200" /><el-table-column prop="urgent_needs" align="center" label="紧急需求" width="200" /><el-table-column prop="defect" align="center" label="缺陷" width="200" /></el-table-column><el-table-column prop="second_release" align="center" label="二次发布" /><el-table-column prop="count" align="center" label="自助发版次数" /></el-table></el-card><el-card style="margin-top: 10px;"><div class="title">2.自动化接入程度</div><el-table v-loading="loading" :data="automationData" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }"><el-table-column prop="month" align="center" label="月份" /><el-table-column prop="total_releases" align="center" label="总发布单元数" /><el-table-column prop="standard_container" align="center" label="标准容器接入数" /><el-table-column prop="standard_virtual" align="center" label="标准虚机接入数" /><el-table-column prop="database" align="center" label="数据库接入数" /><el-table-column prop="service_publishing" align="center" label="自助发版接入数" /></el-table></el-card><el-card style="margin-top: 10px;"><div class="title">3. 12月版本质量指标</div><el-table v-loading="loading" :data="quotaData" :header-cell-style="{ background:'#59A7D4', color: 'black', fontWeight: 'normal' }"><el-table-column align="center" label="二次发布top5"><el-table-column prop="second_num" align="center" label="序号" /><el-table-column prop="second_sub" align="center" label="子系统名" /><el-table-column prop="second_count" align="center" label="次数" /><el-table-column prop="second_department" align="center" label="所属部门" /></el-table-column><el-table-column align="center" label="发布频率top5"><el-table-column prop="frequency_num" align="center" label="序号" /><el-table-column prop="frequency_sub" align="center" label="子系统名" /><el-table-column prop="frequency_count" align="center" label="次数" /><el-table-column prop="frequency_department" align="center" label="所属部门" /></el-table-column></el-table></el-card></div>

// 数据
private basicData: any = [{ month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' },{ month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' },{ month: '12', total_releases: '1000', total: '200(20%)', urgent_needs: '80(8%)', defect: '120(12%)', second_release: '130(13%)', count: '287(16%)' }];private automationData: any = [{ month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' },{ month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' },{ month: '12', total_releases: '1500', standard_container: '350', standard_virtual: '208', database: '199', service_publishing: '199' }];private quotaData: any = [{ second_num: '1', second_sub: 'AAAA', second_count: '4', second_department: 'AAAA', frequency_num: '1', frequency_sub: 'AAAA', frequency_count: '6', frequency_department: 'AAAA' },{ second_num: '2', second_sub: 'AAAA', second_count: '2', second_department: 'AAAA', frequency_num: '2', frequency_sub: '', frequency_count: '', frequency_department: '' },{ second_num: '3', second_sub: '', second_count: '', second_department: '', frequency_num: '3', frequency_sub: '', frequency_count: '', frequency_department: '' },{ second_num: '4', second_sub: '', second_count: '', second_department: '', frequency_num: '4', frequency_sub: '', frequency_count: '', frequency_department: '' },{ second_num: '5', second_sub: '', second_count: '', second_department: '', frequency_num: '5', frequency_sub: '', frequency_count: '', frequency_department: '' }]

3、样式优化（重点）

.title {border: 1px solid black;height: 40px;line-height: 40px;text-align: center;border-bottom: 0;font-size: 14px;background: #E2EFDA;
}
/deep/ .el-table {font-size: 14px!important;border: 1px solid black!important;
}
/deep/  .el-table td {border-bottom: 1px solid black!important;
}
/deep/ .el-table--border th {border-right: 1px solid black!important;border-bottom: 1px solid black!important;
}
/deep/ .el-table--border td {border-right: 1px solid black!important;
}
/deep/ .el-table th.is-leaf {border-right: 1px solid black!important;border-bottom: 1px solid black!important;
}
/deep/ .el-table__row td {border-right: 1px solid black!important;
}
/deep/ .el-table__row td:nth-last-child(1) {border-right: 0!important;
}
.el-table--border::after, .el-table--group::after {width: 0;
}
/deep/ .el-table__header {border-collapse: collapse!important;
}
/deep/ .el-table__body, .el-table__footer, .el-table__header {border-collapse: collapse!important;
}

4、效果

element表格样式优化相关推荐

Element表格样式背景色、边框、斑马条纹、颜色、文字...
// 修改表格的背景色 .common-table-container .el-table, .common-table-container .el-table__expanded-cell {//b ...
设置element表格透明样式
1.element table 表格修改背景为透明并去除边框 .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px s ...
element 表格table纵横双列表头斜线样式处理和多级表头循环
element 表格table纵横双列表头斜线样式处理和多级表头循环 <!DOCTYPE html> <html> <head><meta charset= ...
好看的php表格样式,CSS_CSS实现的清爽、漂亮的表格样式分享，效果：实现代码：复制代码 - phpStudy...
CSS实现的清爽.漂亮的表格样式分享效果: 实现代码: 复制代码代码如下: CSS实现的清爽.漂亮的表格样式 - jb5t1.net /* CSS Document */ body { font: ...
element表格固定某一行_ElementUI Table 首行固定
需求描述:首行固定,吸附在表头下,数据多时其他行可以纵向滚动方案一两个表格拼凑第一个表格展示头部和固定行第二个表格展示其它数据示意图如下优点:固定行数没有限制缺点:适用场景,仅横向纵 ...
绘制pdf表格 (二) 通过itext实现在pdf中绘制excel表格样式设置中文字体、水印、logo、页眉、页码
前言在<通过itext实现在pdf中绘制excel表格样式并且实现下载>实现了表格的基本渲染,本文将继续进行水印.logo.页眉.页码的设置,本文的部分代码包含<通过itext实现 ...
element表格点击某一单元格，当前列变色，列变色
今天,天气晴朗,北风4-5级今天,项目中有个需求,使用element表格的时候,当我点击表格中的某一个单元格的时候,当前单元格所在的列变色,以下是实现列变色办法首先table添加以下属性 2.方法 ...
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...
封装vue导出excel组件（扩展嵌入图片、操作工作表、表格样式等功能）
导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...

element表格样式优化

1、表格的两种形式

2、根据官方文档写自己的表格

3、样式优化（重点）

4、效果

element表格样式优化相关推荐

最新文章

热门文章