做网站商家,中文网址,企业网站 论文,电脑系统7怎么打开wordpress场景图片#xff1a;
图片1#xff1a; 图片2#xff1a; 一#xff1a;使用element中的方法 优点#xff1a; 直接使用summary-method方法#xff0c;直接#xff0c;方便 缺点#xff1a; 只是在表格下面添加了一行#xff0c;如果想有多行就不行了 1#xff1a;h…场景图片
图片1 图片2 一使用element中的方法 优点 直接使用summary-method方法直接方便 缺点 只是在表格下面添加了一行如果想有多行就不行了 1html部分
el-tablev-loadingloading:datatableData:bordertruestylewidth: 100%;:header-cell-style{textAlign:center}:cell-style{textAlign:center}show-summary:summary-methodtableHeJi:default-sort {prop: date, order: descending}el-table-columnpropexpenseCategorylabel费用类别min-width100sortable:show-overflow-tooltiptrue/el-table-columnel-table-columnproporgNamelabel运营公司min-width100sortable:show-overflow-tooltiptrue/el-table-columnel-table-columnpropcontractNumberlabel合同编号min-width100:show-overflow-tooltiptrue/el-table-columnel-table-columnpropcontractNamemin-width80label合同名称:show-overflow-tooltiptrue/el-table-columnel-table-columnproppayeemin-width150label收款单位或个人:show-overflow-tooltiptrue/el-table-columnel-table-columnpropsummaryPaymentContentlabel申请事由min-width120:show-overflow-tooltiptrue/el-table-columnel-table-columnpropappMoneylabel付款金额min-width130:show-overflow-tooltiptrue/el-table-columnel-table-columnpropfundingPlanlabel计划月份min-width100sortable:show-overflow-tooltiptrue/el-table-columnel-table-columnproppayStatuslabel审批状态min-width80:show-overflow-tooltiptrue/el-table-column/el-table
2js方法
tableHeJi(val){const { columns, row } val;const sums [];columns.forEach((item, index) {if (index 0) {sums[index] 总计;return;}else if(index4){sums[index] 合同数量return;}else if(index5){sums[index] this.heJiObj.contractSumnull||this.heJiObj.contractSum?:this.heJiObj.contractSumreturn;}else if(index8){sums[index] 付款金额合计元return;}else if(index9){sums[index] this.heJiObj.sumnull||this.heJiObj.sum?:this.heJiObj.sumreturn;}});return sums}, 二自己定义 优点 可以想表格下面添加多少行都行 缺点 列表的序号会一直往下走 1html部分
el-tablev-loadingloading:datatableData:span-methodobjectSpanMethod:bordertruestylewidth: 100%;:header-cell-style{textAlign:center}:cell-style{textAlign:center}:default-sort {prop: date, order: descending}el-table-column fixed typeindex label序号 width50template slot-scopescopediv{{scope.$index(formData.page-1)*formData.rows1}}/div/template/el-table-columnel-table-columnproplineNamelabel线路min-width120sortable:show-overflow-tooltiptruetemplate slot-scopescopediv classabsoluteDot v-ifscope.row.addRow1div classrelativediv classabsolute flex-center H50div class施工单位签名/div div classimg src stylewidth:120px;height: 30px;background:rgba(118, 222, 107, 0.577); /div/div/div/divdiv classabsoluteDot v-ifscope.row.addRow2div classrelativediv classabsolute意见{{ msg1 }}/div/div/divdiv classabsoluteDot v-ifscope.row.addRow5div classrelativediv classabsolute flex-center H50div class单位领导签名/div div classimg src stylewidth:120px;height: 30px;background:rgba(118, 222, 107, 0.577); /div/div/div/divdiv classabsoluteDot v-ifscope.row.addRow6div classrelativediv classabsolute意见{{ msg2 }}/div/div/divdiv v-else{{scope.row.lineName}}/div/template/el-table-columnel-table-columnpropcontractNumberlabel合同编号min-width90:show-overflow-tooltiptrue/el-table-columnel-table-columnpropcontractNamelabel合同名称min-width120:show-overflow-tooltiptrue/el-table-columnel-table-columnpropprocingCodelabel验工计价编号min-width120:show-overflow-tooltiptrue/el-table-columnel-table-columnproppricingDatemin-width80label验工年月:show-overflow-tooltiptruetemplate slot-scopescopediv classabsoluteDot v-ifscope.row.addRow1div classrelativediv classabsolute flex-center H50div class经理签名/div div classimg src stylewidth:120px;height: 30px;background:rgba(118, 222, 107, 0.577); /div/div/div/divdiv classabsoluteDot v-ifscope.row.addRow2div classrelativediv classabsolute意见{{ msg3 }}/div/div/divdiv classabsoluteDot v-ifscope.row.addRow5div classrelativediv classabsolute flex-center H50div class董事长签名/div div classimg src stylewidth:120px;height: 30px;background:rgba(118, 222, 107, 0.577); /div/div/div/divdiv classabsoluteDot v-ifscope.row.addRow6div classrelativediv classabsolute意见{{ msg4 }}/div/div/divdiv v-else{{scope.row.pricingDate}}/div/template/el-table-columnel-table-columnpropapprovalAmountmin-width150label核准完成金额万元:show-overflow-tooltiptrue/el-table-columnel-table-columnpropnowPayPricinglabel本次支付万元min-width120:show-overflow-tooltiptrue/el-table-columnel-table-columnproppersistentDaylabel持续时间天min-width130sortable:show-overflow-tooltiptrue/el-table-columnel-table-columnpropnowNodelabel当前处理节点min-width100:show-overflow-tooltiptrue/el-table-column/el-table
2css部分
.absoluteDot{position: absolute;left: 10px;top: 0px;width: 0px;height: 0px;}.relative{position: relative;left: 0px;top: 0px;z-index: 100;}.absolute{/* border: 1px solid #fc7f7f; */position: absolute;left: 0px;top: 0px;width: 230px;white-space:break-spaces;text-align: left;}.H50{height: 50px;}
3js部分
// 获取列表的初始化数据getTableData(){this.loadingtrue;tableList(this.formData).then(res{this.loadingfalse;if(res.code0){this.tableDatares.data.list;this.tableAdd();//想表格中添加行的方法}})},tableAdd(){let totalTable1{};totalTable1.addRow1this.tableData.push(totalTable1);let totalTable2{};totalTable2.addRow2this.tableData.push(totalTable2);let totalTable3{};totalTable3.addRow3this.tableData.push(totalTable3);let totalTable4{};totalTable4.addRow4this.tableData.push(totalTable4);let totalTable5{};totalTable5.addRow5this.tableData.push(totalTable5);let totalTable6{};totalTable6.addRow6this.tableData.push(totalTable6);let totalTable7{};totalTable7.addRow7this.tableData.push(totalTable7);let totalTable8{};totalTable8.addRow8this.tableData.push(totalTable8);},
