文章目录

  • 经营简报
    • 效果图
    • 代码
      • tableObjectSpanMethod.js
  • 考核360委员会
    • 效果图
  • 经营简报
    • 效果图
    • 不需要合并单元格且有汇总表头的

懒得封装了，所以整体没有封装

经营简报

效果图

代码

<template><el-tableref="tableRef":data="tableData.length>0?tableData.slice(1,tableData.length):[]"tooltip-effect="dark":span-method="objectSpanMethod":header-cell-style="handerMethod"style="width: 100%; margin-top: 16px":row-class-name="tableRowClassName":cell-class-name="columnStyle"><template v-for="item in tableHeader"><el-table-column :label="item.label" :prop="item.label" :key="item.id" v-if="item.children && item.children.length"><template v-for="i in item.children"><el-table-column:key="i.id":label="i.label":prop="i.prop?i.prop:'/'"align="center"label-class-name="orange"></el-table-column></template></el-table-column><el-table-columnv-else:key="item.id":label="item.label":prop="item.prop?item.prop:'/'"align="center"></el-table-column></template></el-table>
</template>
<script>
//引入封装的js
import { dataMethod } from "@/components/element/tableObjectSpanMethod.js";
export default {data() {return {tableData: [],spanObj: {},tableHeader:[{label:'执行日期',id:1,prop:'data',children:[{id:11,label:'总分1',prop:'data'},{id:12,label:'总分',prop:'time'}]},{label:'指标',id:2,prop:'time',children:[{id:12,label:'总分',prop:'time'}]},{label:'任务名称',id:3,prop:'taskName',children:[{id:13,label:'/',prop:'taskName'}]},{label:'任务进度状态',id:4,prop:'progressStatus',children:[{id:14,label:'/',prop:'progressStatus'}]},{label:'任务结果状态',id:5,prop:'resultStatue',children:[{id:15,label:'/',prop:'resultStatue'}]},{label:'操作',id:6,prop:'/',children:[{id:15,label:'/',prop:'/'}]},]};},created() {(this.tableData = [{data: "总分1",time: "总分2",taskName: "任务20210903",progressStatus: "0",resultStatue: "0",},{data: "收入贡献（万元）",time: "收入贡献（万元）",taskName: "任务",progressStatus: "0",resultStatue: "0",teachingAffairsProjectId:1},{data: "2022-01-07",time: "15:56:08",taskName: "任务20210903",progressStatus: "1",resultStatue: "0",},{data: "2022-01-07",time: "15:56:08",taskName: "任务20210903",progressStatus: "2",resultStatue: "1",},{data: "2022-01-07",time: "15:56:08",taskName: "任务20210903",progressStatus: "3",resultStatue: "1",},{data: "2022-01-08",time: "15:56:08",taskName: "任务20210903",progressStatus: "4",resultStatue: "0",},{data: "2022-01-09",time: "15:56:08",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},{data: "2022-11-09",time: "15:56:08",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},]),//动态渲染 请渲染数剧结束后在执行此方法(this.spanObj = dataMethod(this.tableData));},methods: {/**表格合并单元格 */objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 判断哪一列 如果需要处理多了 使用 || 进行处理即可let addArr = ["总分1"];let delArr = ["总分"];if (row.teachingAffairsProjectId&&rowIndex==0) {// label匹配则开始合并if (addArr.includes(column.label)) {return {// 占位（合并单元格）rowspan: 1, // 行colspan: 2, // 列};} else if (delArr.includes(column.label)) {return [0, 0]; // 清除单元格（一定要做）}}if (columnIndex === 0&&rowIndex!==0) {const _row = this.flitterData(this.tableData.slice(1,this.tableData.length)).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},//合并单位表头handerMethod ({ row, column, rowIndex, columnIndex }) {//   if (row[0].level == 1) {//这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效row[0].colSpan = 0// row[2].colSpan = 0row[1].colSpan = 2if (columnIndex === 0) {return { display: 'none' }}// if (columnIndex === 3) {//   return { display: 'none' }// }},/**合并表格的第一列，处理表格数据 */flitterData(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {//注意这里的data是表格绑定的字段，根据自己的需求来改if (item.data === arr[index - 1].data) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},// 表格斑马纹tableRowClassName({ row, rowIndex }) {// if(rowIndex===0){//     return "orange"// }if (rowIndex % 2 === 0) {return "marginL";} else {return "blueRow marginL";}},columnStyle({ row, column, rowIndex, columnIndex }) {if (columnIndex == 0 &&rowIndex!=0) {return "firstColumn";}},},
};
</script><style >
/* ::v-deep { */
.el-table {/* background-color: #000; */
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {border: 1px solid #ebeef5;
}
.blueRow {background: #f6f9ff !important;
}
.orange {background: rgb(252, 216, 149) !important;
}
.orange>td {background:  rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {background-color: #E7EFFF !important;color: #292929 !important;font-weight: 600 !important;
}
.firstColumn{background: #f6f9ff !important;border:none;
}
.el-table--enable-row-hover .el-table__body tr:hover>.firstColumn.el-table__cell{background: #f6f9ff !important;color: #606266 !important;font-weight: 500 !important;border: 1px solid #ebeef5;
}
/* } */
</style>

tableObjectSpanMethod.js


```// 表格单元格合并多列
let [spanObj, pos] = [{}, {}];
//spanObj 存储每个key 对应的合并值
//pos  存储的是 key合并值得索引 大概吧
const dataMethod = (data, isH = []) => {//循环数据for (let i in data) {let dataI = data[i];//循环数据内对象，查看有多少keyfor (let j in dataI) {//如果只有一条数据时默认为1即可，无需合并if (~~i === 0) {spanObj[j] = [1];pos[j] = 0;} else {let [e, k] = [dataI, data[i - 1]];//判断上一级别是否存在 ，//存在当前的key是否和上级别的key是否一样//判断是否有数组规定只允许那几列需要合并单元格的if (k && e?.[j] === k?.[j] && (!isH?.length || isH?.includes(j))) {//如果上一级和当前一级相当，数组就加1 数组后面就添加一个0spanObj[j][pos[j]] += 1;spanObj?.[j]?.push(0);} else {spanObj?.[j]?.push(1);pos[j] = i;}console.log(e, k);}}}return spanObj;
};export { dataMethod };

考核360委员会

以下以指标明细表格作为参考，整体区别不大，我只合并单元格及第一列值相同自动合并的内容，有其他修改需要自己处理一下

效果图

<template><el-tableref="tableRef":data="tableData"tooltip-effect="dark":span-method="objectSpanMethod":header-cell-style="handerMethod"style="width: 100%; margin-top: 16px":row-class-name="tableRowClassName":cell-class-name="columnStyle"><template v-for="item in tableHeader"><el-table-column :label="item.label" :prop="item.label" :key="item.id" v-if="item.children && item.children.length"><template v-for="i in item.children"><el-table-column:key="i.id":label="i.label":prop="i.prop?i.prop:'/'"align="center"></el-table-column></template></el-table-column><el-table-columnv-else:key="item.id":label="item.label":prop="item.prop?item.prop:'/'"align="center"></el-table-column></template></el-table>
</template>
<script>
//引入封装的js
import { dataMethod } from "@/components/element/tableObjectSpanMethod.js";
export default {data() {return {tableData: [],spanObj: {},tableHeader:[{label:'项目',id:1,prop:'data',},{label:'项目',id:122,prop:'data2',},{label:'收入指标',id:2,prop:'time',children:[{id:12,label:'全收入-净(万元)',prop:'time'},{id:121,label:'地区收入份额',prop:'taskName'}]},{label:'业务指标',id:3,prop:'taskName',children:[{id:13,label:'有效地区股基份额',prop:'taskName'},{id:131,label:'有效地区股基份额',prop:'progressStatus'},{id:132,label:'金融产品销售规模（亿元）',prop:'taskName'},{id:133,label:'金融产品年均保有净值规模（亿元）',prop:'time'},{id:134,label:'日均两融余额（亿元）',prop:'taskName'},]},{label:'任务进度状态',id:4,prop:'progressStatus',children:[{id:14,label:'/',prop:'progressStatus'}]},{label:'任务结果状态',id:5,prop:'resultStatue',children:[{id:15,label:'/',prop:'resultStatue'}]},{label:'操作',id:6,prop:'/',children:[{id:65,label:'/',prop:'resultStatue'}]},{label:'操作',id:7,prop:'/',children:[{id:75,label:'/',prop:'resultStatue'}]},{label:'操作',id:8,prop:'/',children:[{id:85,label:'/',prop:'resultStatue'}]},]};},created() {(this.tableData = [{data: "2022-01-07",data2: "33",time: "15:56:08",taskName: "任务20210903",progressStatus: "1",resultStatue: "0",},{data: "2022-01-07",time: "15:56:08",data2: "44",taskName: "任务20210903",progressStatus: "2",resultStatue: "1",},{data: "2022-01-07",time: "15:56:08",data2: "55",taskName: "任务20210903",progressStatus: "3",resultStatue: "1",},{data: "2022-01-08",time: "15:56:08",data2: "66",taskName: "任务20210903",progressStatus: "4",resultStatue: "0",},{data: "2022-01-09",time: "15:56:08",taskName: "任务20210903",progressStatus: "5",data2: "77",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",data2: "88",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",data2: "99",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},{data: "2022-11-09",time: "15:56:08",data2: "10",taskName: "任务20210903",progressStatus: "5",resultStatue: "1",},]),//动态渲染 请渲染数剧结束后在执行此方法this.spanObj = dataMethod(this.tableData);},methods: {/**表格合并单元格 */objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.flitterData(this.tableData).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},//合并单位表头,第一列和第二列第一行的表头，如不需要合并把这个方法注释即可handerMethod ({ row, column, rowIndex, columnIndex }) {if (row[0].level == 1) {row[0].colSpan = 0row[1].colSpan = 2if (columnIndex === 0) {return { display: 'none' }}}},/**合并表格的第一列，处理表格数据 */flitterData(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {//注意这里的data是表格绑定的字段，根据自己的需求来改if (item.data === arr[index - 1].data) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},// 表格斑马纹tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 === 0) {return "marginL";} else {return "blueRow marginL";}},columnStyle({ row, column, rowIndex, columnIndex }) {if (columnIndex == 0 ) {return "firstColumn";}},},
};
</script><style >
/* ::v-deep { */
.el-table {/* background-color: #000; */
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {border: 1px solid #ebeef5;
}
.blueRow {background: #f6f9ff !important;
}
.orange {background: rgb(252, 216, 149) !important;
}
.orange>td {background:  rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {background-color: #E7EFFF !important;color: #292929 !important;font-weight: 600 !important;
}
.firstColumn{background: #f6f9ff !important;border:none;
}
.el-table--enable-row-hover .el-table__body tr:hover>.firstColumn.el-table__cell{background: #f6f9ff !important;color: #606266 !important;font-weight: 500 !important;border: 1px solid #ebeef5;
}
.el-table thead.is-group th.el-table__cell{text-align: center;
}
/* } */
</style>

经营简报

效果图

不需要合并单元格且有汇总表头的

<template><el-tableref="tableRef":data="tableData"tooltip-effect="dark":span-method="objectSpanMethod":header-cell-style="handerMethod"style="width: 100%; margin-top: 16px":row-class-name="tableRowClassName":cell-class-name="columnStyle"><template v-for="item in tableHeader"><el-table-column :label="item.label" :prop="item.label" :key="item.id" v-if="item.children && item.children.length"><template v-for="i in item.children"><el-table-column:key="i.id":label="i.label":prop="i.prop?i.prop:'/'"align="center"label-class-name="orange"></el-table-column></template></el-table-column><el-table-columnv-else:key="item.id":label="item.label":prop="item.prop?item.prop:'/'"align="center"></el-table-column></template></el-table>
</template>
<script>
//引入封装的js
import { dataMethod } from "@/components/element/tableObjectSpanMethod.js";
export default {data() {return {tableData: [],spanObj: {},tableHeader:[{label:'项目',id:1,prop:'data',children:[{id:111,label:'全净',prop:'data'},]},{label:'项目',id:122,prop:'data2',children:[{id:1222,label:'全收入',prop:'data2'},]},{label:'收入指标',id:2,prop:'time',children:[{id:12,label:'全收入-净',prop:'time'},]},{label:'业务指标',id:3,prop:'taskName',children:[{id:13,label:'有效地区',prop:'taskName'},]},{label:'任务进度状态',id:4,prop:'progressStatus',children:[{id:14,label:'/',prop:'progressStatus'}]},{label:'任务结果状态',id:5,prop:'resultStatue',children:[{id:15,label:'/',prop:'resultStatue'}]},{label:'操作',id:6,prop:'/',children:[{id:65,label:'/',prop:'resultStatue'}]},{label:'操作',id:7,prop:'/',children:[{id:75,label:'/',prop:'resultStatue'}]},{label:'操作',id:8,prop:'/',children:[{id:85,label:'/',prop:'resultStatue'}]},]};},created() {(this.tableData = [{data: "2022-01-07",time: "15:56:08",data2: "55",taskName: "任务2021",progressStatus: "3",resultStatue: "1",},{data: "2022-01-08",time: "15:56:08",data2: "66",taskName: "任务2",progressStatus: "4",resultStatue: "0",},{data: "2022-01-09",time: "15:56:08",taskName: "任务202",progressStatus: "5",data2: "77",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",data2: "88",taskName: "任务903",progressStatus: "5",resultStatue: "1",},{data: "2022-01-09",time: "15:56:08",data2: "99",taskName: "任务3",progressStatus: "5",resultStatue: "1",},{data: "2022-11-09",time: "15:56:08",data2: "10",taskName: "任务03",progressStatus: "5",resultStatue: "1",},]),//动态渲染 请渲染数剧结束后在执行此方法this.spanObj = dataMethod(this.tableData);},methods: {/**表格合并单元格 */objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.flitterData(this.tableData).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},//合并单位表头handerMethod ({ row, column, rowIndex, columnIndex }) {//   if (row[0].level == 1) {//     row[0].colSpan = 0//     row[1].colSpan = 2//     if (columnIndex === 0) {//       return { display: 'none' }//     }//     }},/**合并表格的第一列，处理表格数据 */flitterData(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {//注意这里的data是表格绑定的字段，根据自己的需求来改if (item.data === arr[index - 1].data) {//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},// 表格斑马纹tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 === 0) {return "marginL";} else {return "blueRow marginL";}},columnStyle({ row, column, rowIndex, columnIndex }) {if (columnIndex == 0 ) {return "firstColumn";}},},
};
</script><style >
/* ::v-deep { */
.el-table {/* background-color: #000; */
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {border: 1px solid #ebeef5;
}
.blueRow {background: #f6f9ff !important;
}
.orange {background: rgb(252, 216, 149) !important;
}
.orange>td {background:  rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {background-color: #E7EFFF !important;color: #292929 !important;font-weight: 600 !important;
}
.firstColumn{background: #f6f9ff !important;border:none;
}
.el-table--enable-row-hover .el-table__body tr:hover>.firstColumn.el-table__cell{background: #f6f9ff !important;color: #606266 !important;font-weight: 500 !important;border: 1px solid #ebeef5;
}
.el-table thead.is-group th.el-table__cell{text-align: center;
}
/* } */
</style>

经营简报及考核360表格相关推荐

  1. 企业私域流量sop运营团队部门绩效考核计划表格方案

    网盘下载方式https://pan.baidu.com/s/1WJ5XnWCfarPYe8xagY88Cw?pwd=w56h 第三个是关键词法,你可以把你要演讲的内容提炼成几个关键词,比如说你可以这么 ...

  2. SWOT、KPI 和 360 度考核，绩效评估中的哪个更适用？

    公众号回复:干货,领取价值58元/套IT管理体系文档 公众号回复:ITIL教材,领取最新ITIL4中文教材 正文 绩效评估是绩效管理的核心活动,又称绩效评价,是一种正式的员工评估制度,它是通过系统的方 ...

  3. KPI与360度考核结合的应用落地方案

    文/谢昕辰 周子航 况育军 编辑/麦壁瑜 前言 明道云是一家0考核的公司,无论是销售.技术或行政岗位都没有设立任何形式的考核要求,所以想要从自身经验上出发,去做好各类考核方案的实施其实并不容易.本文构 ...

  4. 软件测试岗位考核指标,(最新整理)测试人员考核标准

    <(最新整理)测试人员考核标准>由会员分享,可在线阅读,更多相关<(最新整理)测试人员考核标准(5页珍藏版)>请在人人文库网上搜索. 1.完整)测试人员考核标准(完整)测试人员 ...

  5. poi设置word表格单元格宽度_xwpftable设置宽度；POI操作Word设置表格宽度

    poi 操作word里表格,如设置表格宽度.行高.表格样式等. 1.表格或单元格宽度: 默认TblW的type属性为STTblWidth.AUTO,即自动伸缩.所以要调整为指定类型:STTblWidt ...

  6. 360董事会秘书张帆卸任 周鸿祎提名王巍接替工作

    雷帝网 乐天 8月28日报道 360公司今日发布公告,称董事会于2018年8月27日收到公司董事会秘书张帆递交的书面辞职报告. 张帆因个人原因辞去公司董事会秘书职务,辞职报告自送达董事会之日起生效.张 ...

  7. 中国水环境治理市场需求前景与十四五战略规划建议报告2022版

    中国水环境治理市场需求前景与十四五战略规划建议报告2022版 -------------------------------------  <修订日期>:2022年2月 <出版单位& ...

  8. CIO如何做到卓有成效？

    福建企业CIO制度建设与信息安全研讨会于2008年1月20日在泉州刺桐饭店举行,研讨会由福建省信息协会CIO分会秘书长谢磊主持,361度(中国)公司IT部经理罗征.安踏(中国)公司信息中心副总监刚昱. ...

  9. 36个数据分析方法与模型

    目录 一.战略与组织 二.质量与生产 三.营销服务 四.财务管理 五.人力资源 六.互联网运营 好的数据分析师不仅熟练地掌握了分析工具,还掌握了大量的数据分析方法和模型. 这样得出的结论不仅具备条理性 ...

最新文章

  1. 本年扩增子、宏基因组课程报名已满，想要学最早等明年
  2. HTML（六）------ CSS
  3. windows7 下vmware workstation 12安装Ubuntu16.04虚拟机及安装和共享文件夹
  4. BeetleX实现HTTP协议详解
  5. ConTeXt 标题前后的空白
  6. Spring-Cloud的版本是如何定义的
  7. 使用 Moq 测试.NET Core 应用 -- Mock 方法
  8. Windows Mobile 5.0
  9. java计算器问题反馈,Java开发网 - 求教计算器问题（急~~~）
  10. iOS xcode ‘XXXX’ was compiled with optimization - stepping may behave oddly; variables may not be av
  11. selenium处理动态加载数据
  12. 简述计算机维修 维护的基本原则是什么,计算机硬件维护的四大原则
  13. Vue.js 菜鸟教程 思维导图
  14. 用ZeroTier搭建属于自己的虚拟局域网(VLAN)
  15. 李飞飞宣布辞职后首次演讲！提出AI三原则；BAT大佬上海打假人工智能
  16. python实现pdf转换成图片
  17. IDLE的介绍和使用
  18. 基于RT1052 Aworks 测试PXP图像混合功能(十三)
  19. 37种土豆的制作方法
  20. http请求 302解决方法

热门文章

  1. 游戏文件删错了怎么恢复？4招帮你找回
  2. Maven相关常见面试题
  3. Photoshop的图像修复与渐变填充
  4. Nginx开启OCSP装订 （Let‘s Encrypt）
  5. 转行软件测试，薪资10K | 真正明智的人，懂得脚踏实地 ...
  6. python 百度网盘同步_利用bypy实现树莓派NAS同步百度云
  7. SQL2017误删除所有表数据的数据恢复情况
  8. textarea只读显示。
  9. Linux 如何测试 IO 性能（磁盘读写速度）
  10. QuizCardGame