西丽网站的建设,哪里网站建设专业,鞍山网络顾问有限公司,博览局网站建设文章目录 经营简报效果图代码tableObjectSpanMethod.js 考核360委员会效果图 经营简报效果图不需要合并单元格且有汇总表头的 懒得封装了#xff0c;所以整体没有封装 经营简报
效果图 代码
templateel-tablereftableRef:datatableData.lengt… 文章目录 经营简报效果图代码tableObjectSpanMethod.js 考核360委员会效果图 经营简报效果图不需要合并单元格且有汇总表头的 懒得封装了所以整体没有封装 经营简报
效果图 代码
templateel-tablereftableRef:datatableData.length0?tableData.slice(1,tableData.length):[]tooltip-effectdark:span-methodobjectSpanMethod:header-cell-stylehanderMethodstylewidth: 100%; margin-top: 16px:row-class-nametableRowClassName:cell-class-namecolumnStyletemplate v-foritem in tableHeaderel-table-column :labelitem.label :propitem.label :keyitem.id v-ifitem.children item.children.lengthtemplate v-fori in item.childrenel-table-column:keyi.id:labeli.label:propi.prop?i.prop:/aligncenterlabel-class-nameorange/el-table-column/template/el-table-columnel-table-columnv-else:keyitem.id:labelitem.label:propitem.prop?item.prop:/aligncenter/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.teachingAffairsProjectIdrowIndex0) {// label匹配则开始合并if (addArr.includes(column.label)) {return {// 占位合并单元格rowspan: 1, // 行colspan: 2, // 列};} else if (delArr.includes(column.label)) {return [0, 0]; // 清除单元格一定要做}}if (columnIndex 0rowIndex!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(rowIndex0){// return orange// }if (rowIndex % 2 0) {return marginL;} else {return blueRow marginL;}},columnStyle({ row, column, rowIndex, columnIndex }) {if (columnIndex 0 rowIndex!0) {return firstColumn;}},},
};
/scriptstyle
/* ::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;
}
.orangetd {background: rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hovertd.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委员会
以下以指标明细表格作为参考整体区别不大我只合并单元格及第一列值相同自动合并的内容有其他修改需要自己处理一下
效果图 templateel-tablereftableRef:datatableDatatooltip-effectdark:span-methodobjectSpanMethod:header-cell-stylehanderMethodstylewidth: 100%; margin-top: 16px:row-class-nametableRowClassName:cell-class-namecolumnStyletemplate v-foritem in tableHeaderel-table-column :labelitem.label :propitem.label :keyitem.id v-ifitem.children item.children.lengthtemplate v-fori in item.childrenel-table-column:keyi.id:labeli.label:propi.prop?i.prop:/aligncenter/el-table-column/template/el-table-columnel-table-columnv-else:keyitem.id:labelitem.label:propitem.prop?item.prop:/aligncenter/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;}},},
};
/scriptstyle
/* ::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;
}
.orangetd {background: rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hovertd.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
经营简报
效果图 不需要合并单元格且有汇总表头的
templateel-tablereftableRef:datatableDatatooltip-effectdark:span-methodobjectSpanMethod:header-cell-stylehanderMethodstylewidth: 100%; margin-top: 16px:row-class-nametableRowClassName:cell-class-namecolumnStyletemplate v-foritem in tableHeaderel-table-column :labelitem.label :propitem.label :keyitem.id v-ifitem.children item.children.lengthtemplate v-fori in item.childrenel-table-column:keyi.id:labeli.label:propi.prop?i.prop:/aligncenterlabel-class-nameorange/el-table-column/template/el-table-columnel-table-columnv-else:keyitem.id:labelitem.label:propitem.prop?item.prop:/aligncenter/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;}},},
};
/scriptstyle
/* ::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;
}
.orangetd {background: rgb(252, 216, 149) !important;
}
.el-table--enable-row-hover .el-table__body tr:hovertd.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
