收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

element ui table 表格自定义边框样式，边框颜色。合并单元格，合并行。element ui table表格行转列

1208人阅读 2024/10/15 17:30 总访问：5182279 评论：0 收藏：0 手机
分类: 前端

设计图：

具体的代码和样式（表格没有加上合并行的）

关于自定义边框样式都加了星号的

  1. <template>
  2.   <div class="app-container">
  3.     <el-table :data="tableData" :header-cell-style="headerCellStyle" :row-style="rowStyle" :border="true" style="width: 100%">
  4.       <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  5.       <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  6.       <el-table-column prop="address" label="地址"> </el-table-column>
  7.     </el-table>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   // 组件名字
  13.   name: "AnalyseTrendByMonth",
  14.   // 组件参数
  15.   props: {
  16.     percentage: {
  17.       type: Number,
  18.       default: 0,
  19.     },
  20.     title: {
  21.       type: String,
  22.       default: "",
  23.     },
  24.   },
  25.   data() {
  26.     return {
  27.       columnsConfg: [
  28.         {
  29.           label: "",
  30.           prop: "describePlatform",
  31.           width: "178px",
  32.           paddingLeft: "35px",
  33.           textAlign: "left",
  34.         },
  35.       ],
  36.       rowdata: [],
  37.       headerCellStyle: {
  38.         background: "rgba(29, 123, 189, 1)",
  39.         height: "39px",
  40.         color: "#fff",
  41.         // border: '1px solid tan',
  42.         // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
  43.         paddingTop: "0px",
  44.         paddingBottom: "0px",
  45.       },
  46.       rowStyle: {
  47.         color: "#fff",
  48.         height: "39px",
  49.         //background: 'rgba(8, 32, 68, 0.7)',
  50.         // 新版本皮肤表格行颜色
  51.         background: "rgba(8, 65, 120, 0.4)",
  52.         // marginBottom: "10px",
  53.         opacity: "0.8",
  54.         paddingTop: "10px",
  55.         paddingBottom: "10px",
  56.       },
  57.       tableData: [
  58.         {
  59.           date: "2016-05-02",
  60.           name: "王小虎",
  61.           address: "上海市普陀区金沙江路 1518 弄",
  62.         },
  63.         {
  64.           date: "2016-05-04",
  65.           name: "王小虎",
  66.           address: "上海市普陀区金沙江路 1517 弄",
  67.         },
  68.         {
  69.           date: "2016-05-01",
  70.           name: "王小虎",
  71.           address: "上海市普陀区金沙江路 1519 弄",
  72.         },
  73.         {
  74.           date: "2016-05-03",
  75.           name: "王小虎",
  76.           address: "上海市普陀区金沙江路 1516 弄",
  77.         },
  78.       ],
  79.     };
  80.   },
  81.   mounted() {
  82.   },
  83.   // 组件方法
  84.   methods: {
  85.   },
  86. };
  87. </script>
  88. <style scoped="scoped" lang="scss">
  89. .app-container {
  90.     padding-top: 5px;
  91.     padding-bottom: 10px;
  92. }
  94. </style>
  96. <!-- 表格样式 -->
  97. <style scoped="scoped" lang="scss">
  98. ::v-deep.el-table--border::after,
  99. ::v-deep .el-table--group::after,
  100. ::v-deep .el-table::before {
  101.   content: "";
  102.   position: absolute;
  103.   background-color: #ebeef5;
  104.   z-index: 1;
  105.   display: none;
  106. }
  108. // ************这里设置边框样式 ************ 
  109. // 这里是整个表格外面一圈的边框样式
  110. ::v-deep .el-table--border{
  111.     border: 1px solid rgba(255, 255, 255, 0.2);
  112.     border-right: none;
  113.     border-bottom: none;
  114. }
  115. ::v-deep  .el-table--group{
  116.     border: 1px solid rgba(255, 255, 255, 0.2);
  117.     border-right: none;
  118.     border-bottom: none;
  119. }
  122. // element ui table 鼠标移动高亮颜色
  123. ::v-deep .el-table tbody tr:hover > td {
  124.   background: #23aaac !important;
  125. }
  127. /* 表格内背景颜色 */
  128. ::v-deep .el-table th,
  129. ::v-deep .el-table tr,
  130. ::v-deep .el-table td {
  131.   background-color: transparent;
  132. }
  134. // 设置行间距
  135. ::v-deep .el-table__body {
  136.   border-collapse: separate !important;
  137.   // 设置这里居然会影响边框线的对齐
  138.   // border-spacing: 0px 3px !important;
  139. }
  141. // ************这里设置边框样式 ************
  142. ::v-deep .el-table--border .el-table__cell {
  143.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  144.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  145. }
  147. // ************这里设置边框样式 ************
  148. ::v-deep .el-table th.el-table__cell.is-leaf {
  149.   border-bottom: 1px solid rgba(255, 255, 255, 0.2)
  150. }
  152. // 这句代码加了鼠标指上去变色就显示不出来
  153. ::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  154.   background-color: transparent !important;
  155. }
  157. ::v-deep.el-table td.el-table__cell div.cell {
  158.   background-color: transparent !important;
  159. }
  161. ::v-deep .el-table {
  162.   background-color: transparent !important;
  163. }
  165. ::v-deep .el-table__row {
  166.   background-color: transparent;
  167. }
  169. /* 去除底部白线 */
  170. .el-table::before {
  171.   background-color: transparent;
  172. }
  174. .pageWrapper {
  175.   margin: 10px auto;
  176.   text-align: center;
  177.   padding-bottom: 15px;
  178. }
  180. // --------------------隐藏table gutter列和内容区右侧的空白 start
  181. ::v-deep .el-table th.gutter {
  182.   display: none;
  183.   width: 0;
  184. }
  186. ::v-deep .el-table colgroup col[name="gutter"] {
  187.   display: none;
  188.   width: 0;
  189. }
  191. // 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
  192. ::v-deep .el-table__body {
  193.   width: 100% !important;
  194. }
  196. // --------------------隐藏table gutter列和内容区右侧的空白 end
  197. </style>

加上合并行之后的

  1. <template>
  2.   <div class="app-container">
  3.     <el-table :data="tableData"  :span-method="courseSpan" :header-cell-style="headerCellStyle" :row-style="rowStyle" :border="true" style="width: 100%">
  4.       <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  5.       <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  6.       <el-table-column prop="address" label="地址"> </el-table-column>
  7.     </el-table>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   // 组件名字
  13.   name: "AnalyseTrendByMonth",
  14.   // 组件参数
  15.   props: {
  16.     percentage: {
  17.       type: Number,
  18.       default: 0,
  19.     },
  20.     title: {
  21.       type: String,
  22.       default: "",
  23.     },
  24.   },
  25.   data() {
  26.     return {
  27.       columnsConfg: [
  28.         {
  29.           label: "",
  30.           prop: "describePlatform",
  31.           width: "178px",
  32.           paddingLeft: "35px",
  33.           textAlign: "left",
  34.         },
  35.       ],
  36.       rowdata: [],
  37.       headerCellStyle: {
  38.         background: "rgba(29, 123, 189, 1)",
  39.         height: "39px",
  40.         color: "#fff",
  41.         // border: '1px solid tan',
  42.         // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
  43.         paddingTop: "0px",
  44.         paddingBottom: "0px",
  45.       },
  46.       rowStyle: {
  47.         color: "#fff",
  48.         height: "39px",
  49.         //background: 'rgba(8, 32, 68, 0.7)',
  50.         // 新版本皮肤表格行颜色
  51.         background: "rgba(8, 65, 120, 0.4)",
  52.         // marginBottom: "10px",
  53.         opacity: "0.8",
  54.         paddingTop: "10px",
  55.         paddingBottom: "10px",
  56.       },
  57.       tableData: [
  58.         {
  59.           date: "2016-05-02",
  60.           name: "王小虎",
  61.           address: "上海市普陀区金沙江路 1518 弄",
  62.         },
  63.         {
  64.           date: "2016-05-02",
  65.           name: "王大虎",
  66.           address: "上海市普陀区金沙江路 3213 弄",
  67.         },
  68.         {
  69.           date: "2016-05-04",
  70.           name: "张晓白",
  71.           address: "上海市普陀区金沙江路 1517 弄",
  72.         },
  73.         {
  74.           date: "2016-05-04",
  75.           name: "陈木惟",
  76.           address: "上海市普陀区金沙江路 6666 弄",
  77.         },
  78.         {
  79.           date: "2016-05-01",
  80.           name: "柏树枝",
  81.           address: "上海市普陀区金沙江路 1519 弄",
  82.         },
  83.         {
  84.           date: "2016-05-03",
  85.           name: "杨华锋",
  86.           address: "上海市普陀区金沙江路 1516 弄",
  87.         },
  88.       ],
  89.     };
  90.   },
  91.   mounted() {
  92.     this.initCourseSpanArr(this.tableData)
  93.   },
  94.   // 组件方法
  95.   methods: {
  96.     // 处理合并数据
  97.     initCourseSpanArr(data) {
  98.       const spanArray = [];
  99.       for (var i = 0; i < data.length; i++) {
  100.         if (i === 0) {
  101.           spanArray.push(1);
  102.           this.pos = 0;
  103.         } else {
  104.           // 判断当前元素与上一个元素是否相同。这里是判断需要合并的字段
  105.           if (data[i].date === data[i - 1].date) {
  106.             spanArray[this.pos] += 1;
  107.             spanArray.push(0);
  108.           } else {
  109.             spanArray.push(1);
  110.             this.pos = i;
  111.           }
  112.         }
  113.       }
  114.       this.courseSpanArry = spanArray;
  115.     },
  116.     courseSpan({rowIndex, columnIndex }) {
  117.       if (columnIndex === 0) {
  118.         const _row = this.courseSpanArry[rowIndex];
  119.         const _col = _row > 0 ? 1 : 0;
  120.         return {
  121.           rowspan: _row,
  122.           colspan: _col,
  123.         };
  124.       }
  125.     },
  126.   },
  127. };
  128. </script>
  129. <style scoped="scoped" lang="scss">
  130. .app-container {
  131.   padding-top: 5px;
  132.   padding-bottom: 10px;
  133. }
  134. </style>
  136. <!-- 表格样式 -->
  137. <style scoped="scoped" lang="scss">
  138. ::v-deep.el-table--border::after,
  139. ::v-deep .el-table--group::after,
  140. ::v-deep .el-table::before {
  141.   content: "";
  142.   position: absolute;
  143.   background-color: #ebeef5;
  144.   z-index: 1;
  145.   display: none;
  146. }
  148. // ************这里设置边框样式 ************
  149. // 这里是整个表格外面一圈的边框样式
  150. ::v-deep .el-table--border {
  151.   border: 1px solid rgba(255, 255, 255, 0.2);
  152.   border-right: none;
  153.   border-bottom: none;
  154. }
  155. ::v-deep .el-table--group {
  156.   border: 1px solid rgba(255, 255, 255, 0.2);
  157.   border-right: none;
  158.   border-bottom: none;
  159. }
  161. // element ui table 鼠标移动高亮颜色
  162. ::v-deep .el-table tbody tr:hover > td {
  163.   background: #23aaac !important;
  164. }
  166. /* 表格内背景颜色 */
  167. ::v-deep .el-table th,
  168. ::v-deep .el-table tr,
  169. ::v-deep .el-table td {
  170.   background-color: transparent;
  171. }
  173. // 设置行间距
  174. ::v-deep .el-table__body {
  175.   border-collapse: separate !important;
  176.   // 设置这里居然会影响边框线的对齐
  177.   // border-spacing: 0px 3px !important;
  178. }
  180. // ************这里设置边框样式 ************
  181. ::v-deep .el-table--border .el-table__cell {
  182.   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  183.   border-right: 1px solid rgba(255, 255, 255, 0.2);
  184. }
  186. // ************这里设置边框样式 ************
  187. ::v-deep .el-table th.el-table__cell.is-leaf {
  188.   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  189. }
  191. // 这句代码加了鼠标指上去变色就显示不出来
  192. ::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  193.   background-color: transparent !important;
  194. }
  196. ::v-deep.el-table td.el-table__cell div.cell {
  197.   background-color: transparent !important;
  198. }
  200. ::v-deep .el-table {
  201.   background-color: transparent !important;
  202. }
  204. ::v-deep .el-table__row {
  205.   background-color: transparent;
  206. }
  208. /* 去除底部白线 */
  209. .el-table::before {
  210.   background-color: transparent;
  211. }
  213. .pageWrapper {
  214.   margin: 10px auto;
  215.   text-align: center;
  216.   padding-bottom: 15px;
  217. }
  219. // --------------------隐藏table gutter列和内容区右侧的空白 start
  220. ::v-deep .el-table th.gutter {
  221.   display: none;
  222.   width: 0;
  223. }
  225. ::v-deep .el-table colgroup col[name="gutter"] {
  226.   display: none;
  227.   width: 0;
  228. }
  230. // 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
  231. ::v-deep .el-table__body {
  232.   width: 100% !important;
  233. }
  235. // --------------------隐藏table gutter列和内容区右侧的空白 end
  236. </style>
合并单元格的代码就是js这点
  1.   mounted() {
  2.     this.initCourseSpanArr(this.tableData)
  3.   },
  4.   // 组件方法
  5.   methods: {
  6.     // 处理合并数据
  7.     initCourseSpanArr(data) {
  8.       const spanArray = [];
  9.       for (var i = 0; i < data.length; i++) {
  10.         if (i === 0) {
  11.           spanArray.push(1);
  12.           this.pos = 0;
  13.         } else {
  14.           // 判断当前元素与上一个元素是否相同。这里是判断需要合并的字段
  15.           if (data[i].date === data[i - 1].date) {
  16.             spanArray[this.pos] += 1;
  17.             spanArray.push(0);
  18.           } else {
  19.             spanArray.push(1);
  20.             this.pos = i;
  21.           }
  22.         }
  23.       }
  24.       this.courseSpanArry = spanArray;
  25.     },
  26.     courseSpan({rowIndex, columnIndex }) {
  27.       if (columnIndex === 0) {
  28.         const _row = this.courseSpanArry[rowIndex];
  29.         const _col = _row > 0 ? 1 : 0;
  30.         return {
  31.           rowspan: _row,
  32.           colspan: _col,
  33.         };
  34.       }
  35.     },
  36.   },

还有就是表格上方要加上这句：

  1. <el-table  :span-method="courseSpan">

对接真实的接口，加上行转列的效果

单独的示例可以参考一下这篇文章，这里边的数据没有对接真是接口逻辑要简单一些：https://www.tnblog.net/xiuxin3/article/details/8482

接口返回的数据源是这个样子：
有评估，实验，产教的数据接口回来，这里只展示了评估的数据接口作为示例：

  1. {
  2.     "code": 0,
  3.     "data": [
  4.         {
  5.             "systemName": null,
  6.             "year": 2024,
  7.             "month": 9,
  8.             "quantity": 0,
  9.             "completPr": 0.2164,
  10.             "planCompletePr": 0.8455172413793103448275862069
  11.         },
  12.         {
  13.             "systemName": null,
  14.             "year": 2024,
  15.             "month": 10,
  16.             "quantity": 0,
  17.             "completPr": 0.3224,
  18.             "planCompletePr": 0.4787902592301649646504320503
  19.         },
  20.         {
  21.             "systemName": null,
  22.             "year": 2024,
  23.             "month": 11,
  24.             "quantity": 0,
  25.             "completPr": 0.0,
  26.             "planCompletePr": 0.0
  27.         },
  28.         {
  29.             "systemName": null,
  30.             "year": 2024,
  31.             "month": 12,
  32.             "quantity": 0,
  33.             "completPr": 0.0,
  34.             "planCompletePr": 0.0
  35.         },
  36.         {
  37.             "systemName": null,
  38.             "year": 2025,
  39.             "month": 1,
  40.             "quantity": 0,
  41.             "completPr": 0.0,
  42.             "planCompletePr": 0.0
  43.         }
  44.     ],
  45.     "success": true,
  46. }

接口出来的数据源要先处理成这个样子的，这样行专列好处理一点：

  1. const rawData = [  
  2.   { "type": "评估", "month": 9, "CompleteType": "目标达成率", "CompleteValue": 0.2164 },  
  3.   { "type": "评估", "month": 10, "CompleteType": "整体完成率", "CompleteValue": 0.7164 },  
  4.   { "type": "审计", "month": 9, "CompleteType": "目标达成率", "CompleteValue": 0.6164 },  
  5.   { "type": "审计", "month": 10, "CompleteType": "整体完成率", "CompleteValue": 0.5164 },  
  6. ];

整体代码如下：
this.$sysconfig.evaluate_name_short = “评估”
this.$sysconfig.labroom_name_short = “实验”
this.$sysconfig.prod_name_short = “产教”

  1. <template>
  2.   <div class="app-container">
  3.     <el-table :data="tableData" :span-method="courseSpan" :header-cell-style="headerCellStyle" :row-style="rowStyle" :border="true" style="width: 100%">
  4.       <el-table-column prop="type" label="系统" width="180" align="center"> </el-table-column>
  5.       <el-table-column prop="indicator" label="类型" width="180" align="center"> </el-table-column>
  6.       <el-table-column v-for="(month, key) in monthMapValues" align="center" :key="key" :label="month" :prop="month" :formatter="formatPercentage" />
  7.     </el-table>
  8.   </div>
  9. </template>
  10. <script>
  11. export default {
  12.   // 组件名字
  13.   name: "AnalyseTrendByMonth",
  14.   // 组件参数
  15.   props: {
  16.     percentage: {
  17.       type: Number,
  18.       default: 0,
  19.     },
  20.     title: {
  21.       type: String,
  22.       default: "",
  23.     },
  24.   },
  25.   data() {
  26.     return {
  27.       columnsConfg: [
  28.         {
  29.           label: "",
  30.           prop: "describePlatform",
  31.           width: "178px",
  32.           paddingLeft: "35px",
  33.           textAlign: "left",
  34.         },
  35.       ],
  36.       rowdata: [],
  37.       headerCellStyle: {
  38.         background: "rgba(29, 123, 189, 1)",
  39.         height: "39px",
  40.         color: "#fff",
  41.         // border: '1px solid tan',
  42.         // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
  43.         paddingTop: "0px",
  44.         paddingBottom: "0px",
  45.       },
  46.       rowStyle: {
  47.         color: "#fff",
  48.         height: "39px",
  49.         //background: 'rgba(8, 32, 68, 0.7)',
  50.         // 新版本皮肤表格行颜色
  51.         background: "rgba(8, 65, 120, 0.4)",
  52.         // marginBottom: "10px",
  53.         opacity: "0.8",
  54.         paddingTop: "10px",
  55.         paddingBottom: "10px",
  56.       },
  57.       monthTableData: [],
  58.       tableData: [],
  59.       monthMapValues: ["9月", "10月"],
  60.       monthMap: {},
  61.       monthResultCount: 0,
  62.     };
  63.   },
  64.   mounted() {
  65.     this.monthResultCount = 0;
  66.     this.getSysUseMonthReport();
  67.   },
  68.   watch: {
  69.     monthResultCount(newVal) {
  70.       // 三个平台的数据都回来了在去处理行专列合并单元格等
  71.       if (newVal === 3) {
  72.         // console.log("三个平台的数据都回来了...")
  74.         // 这里可以进行一个排序，方便自己控制数据列的展示
  75.         this.monthTableData = this.monthTableData.slice().sort((a, b) => a.sort - b.sort);
  77.         let transformTableData = this.transformData(this.monthTableData, this.monthMap);
  78.         this.tableData = transformTableData;
  79.         this.initCourseSpanArr(transformTableData);
  80.       }
  81.     },
  82.   },
  83.   // 组件方法
  84.   methods: {
  85.     formatPercentage(row, column, cellValue) {
  86.       // console.log("看看返回值", cellValue);
  87.       // 这个方法可以用于格式化百分比，但我们已经在transformData中完成了格式化
  88.       // 所以这里可以直接返回cellValue，或者根据需要进行进一步处理
  89.       return cellValue;
  90.     },
  91.     // 行专列方法，把行中的月份转化为方法
  92.     transformData: function (data, monthMap) {
  93.       const result = [];
  94.       const types = [...new Set(data.map((item) => item.type))];
  95.       const completeTypes = [...new Set(data.map((item) => item.completType))];
  97.       types.forEach((type) => {
  98.         completeTypes.forEach((completeType) => {
  99.           const row = {
  100.             type: type,
  101.             indicator: completeType,
  102.             ...Object.keys(monthMap).reduce((acc, month) => {
  103.               const value = data.find((item) => item.type === type && item.completType === completeType && item.month === parseInt(month, 10))?.completValue;
  105.               let returnValue = "0%";
  106.               if (value >= 0) {
  107.                 returnValue = (value * 100).toFixed(2);
  108.               } else {
  109.                 returnValue = "-";
  110.               }
  111.               return { ...acc, [monthMap[month]]: returnValue };
  112.               // return { ...acc, [monthMap[month]]: value ? (value * 100).toFixed(2) + "%" : "-" };
  113.             }, {}),
  114.           };
  115.           result.push(row);
  116.         });
  117.       });
  119.       return result;
  120.     },
  121.     // 系统月使用情况
  122.     getSysUseMonthReport: async function () {
  123.       let stId = await this.$getStId();
  124.       let my = this;
  125.       let mCount = 7;
  127.       const currentDate = new Date();
  128.       const currentYear = currentDate.getFullYear();
  129.       let currentMonth = currentDate.getMonth();
  131.       this.monthMapValues = [];
  132.       this.monthTableData = [];
  133.       this.monthResultCount = 0;
  135.       let monthMap = {};
  136.       for (let index = currentMonth; index < currentMonth + 7; index++) {
  137.         let calYear = currentYear;
  138.         let calMonth = index;
  139.         // 说明应该是下一年开始了
  140.         if (index > 12) {
  141.           calYear = calYear + 1;
  142.           calMonth = index - 12;
  143.         }
  144.         monthMap[calMonth] = calMonth + "月";
  146.         // 给动态列名提供数据
  147.         this.monthMapValues.push(calMonth + "月");
  149.         // console.log("看看年月", calYear, calMonth);
  150.       }
  151.       this.monthMap = monthMap;
  152.       // console.log("看看月转化对象", monthMap);
  154.       // 评估完成情况
  155.       this.$http.get("/evaluation/api/TeacherReportCurriculum/XX", { SchoolTermID: stId, monthCount: mCount, IncludeAll: this.includeAll }).then((res) => {
  156.         // console.log("评估月使用情况", res.data);
  158.         // 每月都要显示一条数据,其实用行转列做逻辑应该简单点
  159.         for (let index = currentMonth; index < currentMonth + 7; index++) {
  160.           let calYear = currentYear;
  161.           let calMonth = index;
  162.           // 说明应该是下一年开始了
  163.           if (index > 12) {
  164.             calYear = calYear + 1;
  165.             calMonth = index - 12;
  166.           }
  167.           // console.log("看看年月", calYear, calMonth);
  168.           let findData = res.data.find((a) => a.month == calMonth && a.year == calYear);
  170.           my.monthTableData.push({
  171.             sort: 1,
  172.             type: my.$sysconfig.evaluate_name_short,
  173.             year: calYear,
  174.             month: calMonth,
  175.             completType: "目标达成率",
  176.             completValue: findData.planCompletePr,
  177.           });
  179.           my.monthTableData.push({
  180.             completType: "整体完成率",
  181.             sort: 2,
  182.             year: calYear,
  183.             type: my.$sysconfig.evaluate_name_short,
  184.             month: findData.month,
  185.             completValue: findData.completPr,
  186.           });
  187.         }
  189.         my.monthResultCount = my.monthResultCount + 1;
  191.         // let transformTableData = this.transformData(my.monthTableData, monthMap);
  192.         // this.tableData = transformTableData
  193.         // this.initCourseSpanArr(transformTableData)
  195.         // console.log("看看表格组装出来的数据呢",my.monthTableData)
  196.         // console.log("看看转化出来后的表格", this.tableData);
  197.       });
  199.       // 实验完成情况
  200.       this.$http.get("/labroom/api/Report/XX", { stdetailID: stId, monthCount: mCount, IncludeAll: this.includeAll }).then((res) => {
  201.         // console.log("实验月使用情况", res.data);
  203.         // 每月都要显示一条数据,其实用行转列做逻辑应该简单点
  204.         for (let index = currentMonth; index < currentMonth + 7; index++) {
  205.           let calYear = currentYear;
  206.           let calMonth = index;
  207.           // 说明应该是下一年开始了
  208.           if (index > 12) {
  209.             calYear = calYear + 1;
  210.             calMonth = index - 12;
  211.           }
  212.           let findData = res.data.find((a) => a.month == calMonth && a.year == calYear);
  214.           my.monthTableData.push({
  215.             sort: 3,
  216.             completType: "目标达成率",
  217.             type: my.$sysconfig.labroom_name_short,
  218.             year: calYear,
  219.             month: calMonth,
  220.             completValue: findData.goalAchievementPr,
  221.           });
  223.           my.monthTableData.push({
  224.             sort: 4,
  225.             completType: "整体完成率",
  226.             type: my.$sysconfig.labroom_name_short,
  227.             month: findData.month,
  228.             year: calYear,
  229.             completValue: findData.mustDoCompletPr,
  230.           });
  231.         }
  233.         my.monthResultCount = my.monthResultCount + 1;
  234.       });
  236.       // 产教使用情况
  237.       this.$http.get("/prodedu/api/v2/Report/XX", { stdetailID: stId, monthCount: mCount, includeAll: this.includeAll }).then((res) => {
  238.         // console.log("产教月使用情况", res.data);
  240.         // 每月都要显示一条数据,其实用行转列做逻辑应该简单点
  241.         for (let index = currentMonth; index < currentMonth + 7; index++) {
  242.           let calYear = currentYear;
  243.           let calMonth = index;
  244.           if (index > 12) {
  245.             calYear = calYear + 1;
  246.             calMonth = index - 12;
  247.           }
  248.           let findData = res.data.find((a) => a.month == calMonth && a.year == calYear);
  250.           my.monthTableData.push({
  251.             sort: 5,
  252.             completType: "目标达成率",
  253.             type: my.$sysconfig.prod_name_short,
  254.             year: calYear,
  255.             month: calMonth,
  256.             completValue: findData.monthCper,
  257.           });
  259.           my.monthTableData.push({
  260.             sort: 6,
  261.             completType: "整体完成率",
  262.             type: my.$sysconfig.prod_name_short,
  263.             month: findData.month,
  264.             year: calYear,
  265.             completValue: findData.completPr,
  266.           });
  267.         }
  269.         my.monthResultCount = my.monthResultCount + 1;
  270.       });
  271.     },
  272.     // 处理合并数据
  273.     initCourseSpanArr(data) {
  274.       const spanArray = [];
  275.       for (var i = 0; i < data.length; i++) {
  276.         if (i === 0) {
  277.           spanArray.push(1);
  278.           this.pos = 0;
  279.         } else {
  280.           // 判断当前元素与上一个元素是否相同。这里是判断需要合并的字段
  281.           if (data[i].type === data[i - 1].type) {
  282.             spanArray[this.pos] += 1;
  283.             spanArray.push(0);
  284.           } else {
  285.             spanArray.push(1);
  286.             this.pos = i;
  287.           }
  288.         }
  289.       }
  290.       this.courseSpanArry = spanArray;
  291.     },
  292.     courseSpan({ rowIndex, columnIndex }) {
  293.       if (columnIndex === 0) {
  294.         const _row = this.courseSpanArry[rowIndex];
  295.         const _col = _row > 0 ? 1 : 0;
  296.         return {
  297.           rowspan: _row,
  298.           colspan: _col,
  299.         };
  300.       }
  301.     },
  302.   },
  303. };
  304. </script>
  305. <style scoped="scoped" lang="scss">
  306. .app-container {
  307.   padding-top: 5px;
  308.   padding-bottom: 10px;
  309. }
  310. </style>
  312. <!-- 表格样式 -->
  313. <style scoped="scoped" lang="scss">
  314. ::v-deep.el-table--border::after,
  315. ::v-deep .el-table--group::after,
  316. ::v-deep .el-table::before {
  317.   content: "";
  318.   position: absolute;
  319.   background-color: #ebeef5;
  320.   z-index: 1;
  321.   display: none;
  322. }
  324. // ************这里设置边框样式 ************
  325. // 这里是整个表格外面一圈的边框样式
  326. ::v-deep .el-table--border {
  327.   border: 1px solid rgba(255, 255, 255, 0.2);
  328.   border-right: none;
  329.   border-bottom: none;
  330. }
  331. ::v-deep .el-table--group {
  332.   border: 1px solid rgba(255, 255, 255, 0.2);
  333.   border-right: none;
  334.   border-bottom: none;
  335. }
  337. // element ui table 鼠标移动高亮颜色
  338. ::v-deep .el-table tbody tr:hover > td {
  339.   background: #23aaac !important;
  340. }
  342. /* 表格内背景颜色 */
  343. ::v-deep .el-table th,
  344. ::v-deep .el-table tr,
  345. ::v-deep .el-table td {
  346.   background-color: transparent;
  347. }
  349. // 设置行间距
  350. ::v-deep .el-table__body {
  351.   border-collapse: separate !important;
  352.   // 设置这里居然会影响边框线的对齐
  353.   // border-spacing: 0px 3px !important;
  354. }
  356. // ************这里设置边框样式 ************
  357. ::v-deep .el-table--border .el-table__cell {
  358.   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  359.   border-right: 1px solid rgba(255, 255, 255, 0.2);
  360. }
  362. // ************这里设置边框样式 ************
  363. ::v-deep .el-table th.el-table__cell.is-leaf {
  364.   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  365. }
  367. // 这句代码加了鼠标指上去变色就显示不出来
  368. ::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  369.   background-color: transparent !important;
  370. }
  372. ::v-deep.el-table td.el-table__cell div.cell {
  373.   background-color: transparent !important;
  374. }
  376. ::v-deep .el-table {
  377.   background-color: transparent !important;
  378. }
  380. ::v-deep .el-table__row {
  381.   background-color: transparent;
  382. }
  384. /* 去除底部白线 */
  385. .el-table::before {
  386.   background-color: transparent;
  387. }
  389. .pageWrapper {
  390.   margin: 10px auto;
  391.   text-align: center;
  392.   padding-bottom: 15px;
  393. }
  395. // --------------------隐藏table gutter列和内容区右侧的空白 start
  396. ::v-deep .el-table th.gutter {
  397.   display: none;
  398.   width: 0;
  399. }
  401. ::v-deep .el-table colgroup col[name="gutter"] {
  402.   display: none;
  403.   width: 0;
  404. }
  406. // 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
  407. ::v-deep .el-table__body {
  408.   width: 100% !important;
  409. }
  411. // --------------------隐藏table gutter列和内容区右侧的空白 end
  412. </style>

element ui table 自定义样式其他参考

https://www.tnblog.net/aojiancc2/article/details/8061
https://www.tnblog.net/notebook/article/details/8469
https://www.tnblog.net/aojiancc2/article/details/8111


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

element ui table 表格行颜色自定义。单元格颜色 。根据条件改变行或者单元格的颜色
行列样式主要是这几个 属性名 描述 回调函数 row-class-name 行的 className 的回调方法，也可以使用字符...

element ui table 表格获取 行号，列数
方法一：页面 &lt;el-table-column prop=&quot;courseName&quot; label=&quot;测试获取行号&quot; align=&quot;center&quo...

element ui table 表格行颜色自定义单元格颜色自定义。背景颜色自定义。风格自定义
[TOC]实现效果一效果图 代码如下template:&lt;template&gt; &lt;div class=&quot;emergencyEvents-container&quot;&gt;...

element ui table表格行转列，月份数据行转列
我们需要展示一个这样的表格数据 [TOC]接口返回的数据源是这个样子有评估，实验，产教的数据接口回来，这里只展示了评估...

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框，据输入，动态加载数据 jquery-editable-select
用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页，.net core分部页
.net分部页的三种方式第一种：@Html.Partial(&quot;_分部页&quot;)第二种：@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式，iis设置mime类型，iis配置支持的类型
webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现，无视文件大小上传，以及datatables基本用法
首先明白js是客户带执行代码，c#是服务器上执行代码。本地文件需要用到js处理，服务器端接受c#代码处理1.HTML页面，文件信...

如何使用图标像使用文字一样，使用文本图标的方法
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标；注意：每个类型的图标会大小不...

使用七牛云的cdn服务，提高图片的加载速度
CDN介绍CDN的全称是Content Delivery Network，即内容分发网络。CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，...

通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core?
朋友圈@蓝羽 看到一篇文章写的太详细太通俗了，搬过来细细看完，保证你对.NET有个新的认识理解原文地址：https://www.cnblo...

JS监听input、keydown，有输入法时打字完成后触发事件
在给输入框绑定input或keydown事件时预期效果是有输入法时，输入中文后触发事件，不希望输一个字母就触发一次事件可以用到c...