增加总计

src/views/static/components/tab-all.vue

@@ -9,7 +9,7 @@
                 </div>
             </el-row>
             
-                <el-table :data="tableData" border class="mt-4 "  v-if="costcheck==1" :header-cell-style="headerStyle" stripe>
+            <el-table :data="tableData" border class="mt-4 "  v-if="costcheck==1" :header-cell-style="headerStyle" stripe>
                 <el-table-column v-for="item in tableColData"  align="center" 
                 :prop="item.id"
                 :label="item.name"
@@ -84,6 +84,7 @@ const tableData=ref([
     {time:'十月',beginremain:'2000'},
     {time:'十一月',beginremain:'2000'},
     {time:'十二月',beginremain:'2000'},
+    
 
 ])
 const tableColData=ref([

src/views/static/components/tab-decost.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bg-white p-2 table_box" >
      
-          <el-table :data="tableData" border class="mt-4"   :header-cell-style="headerStyle" stripe >
+          <el-table :data="tableData" border class="mt-4"   :header-cell-style="headerStyle" stripe  :row-class-name="tableRowClassName">
           <el-table-column v-for="item in tableColData"  align="center"
           :prop="item.id"
           :label="item.name"
@@ -43,7 +43,7 @@ console.log(key)
 
 
 const tableData=ref([
-
+{time:'一月',beginremain:'2000'},
 {time:'二月',market:'2000',precost:1000,realcost:2000},
 {time:'三月',beginremain:'2000'},
 {time:'四月',beginremain:'2000'},
@@ -55,6 +55,7 @@ const tableData=ref([
 {time:'十月',beginremain:'2000'},
 {time:'十一月',beginremain:'2000'},
 {time:'十二月',beginremain:'2000'},
+{time:'总计',beginremain:'2000'},
 
 
 
@@ -169,7 +170,12 @@ const headerStyle=({ row, column, rowIndex, columnIndex })=>{
 
       return comStyle;
 }
-
+   //指定行颜色
+const  tableRowClassName=({ row, rowIndex }) =>{
+      if (rowIndex ===12) {
+        return 'warm-row';
+      }
+ }
 const costcheck=ref('1')
 </script>
 

src/views/static/components/tab-mannager.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bg-white p-2 table_box" >
      
-          <el-table :data="tableData" border class="mt-4"  stripe     :header-cell-style="headerStyle"
+          <el-table :data="tableData" border class="mt-4"  stripe     :header-cell-style="headerStyle" :row-class-name="tableRowClassName"
 >
           <el-table-column v-for="item in tableColData"  align="center"
           :prop="item.id"
@@ -46,6 +46,7 @@ console.log(key)
 
 const tableData=ref([
 
+{time:'一月',beginremain:'2000'},
 {time:'二月',market:'2000',precost:1000,realcost:2000},
 {time:'三月',beginremain:'2000'},
 {time:'四月',beginremain:'2000'},
@@ -57,6 +58,7 @@ const tableData=ref([
 {time:'十月',beginremain:'2000'},
 {time:'十一月',beginremain:'2000'},
 {time:'十二月',beginremain:'2000'},
+{time:'总计',beginremain:'2000'},
 
 
 
@@ -131,7 +133,12 @@ const headerStyle=({ row, column, rowIndex, columnIndex })=>{
       return comStyle;
 }
 
-
+   //指定行颜色
+   const  tableRowClassName=({ row, rowIndex }) =>{
+      if (rowIndex ===12) {
+        return 'warm-row';
+      }
+ }
 
 </script>
 

src/views/static/components/tab-month.vue

@@ -1,12 +1,11 @@
 <template>
     <div class="bg-white p-2 table_box" >
      
-          <el-table :data="tableData" border class="mt-4"  stripe  :header-cell-style="headerStyle">
+          <el-table :data="tableData" border class="mt-4"  stripe  :header-cell-style="headerStyle"  :row-class-name="tableRowClassName">
           <el-table-column v-for="item in tableColData"  align="center"
           :prop="item.id"
           :label="item.name"
           :key="item.name"
-        
           >
               <el-table-column v-for="item1 in item.children" align="center"
                   :prop="item1.id"
@@ -55,6 +54,7 @@ const tableData=ref([
 {time:'十月',beginremain:'2000'},
 {time:'十一月',beginremain:'2000'},
 {time:'十二月',beginremain:'2000'},
+{time:'总计',beginremain:'2000'},
 
 
 
@@ -138,14 +138,28 @@ const headerStyle=({ row, column, rowIndex, columnIndex })=>{
           ...comStyle,
         };
       }
+      if(rowIndex===15){
+        return {
+          color: "red",
+          ...comStyle,
+        };
+      }
 
       return comStyle;
 }
 
-
+   //指定行颜色
+ const  tableRowClassName=({ row, rowIndex }) =>{
+      if (rowIndex ===12) {
+        return 'warm-row';
+      }
+  }
 const costcheck=ref('1')
 </script>
 
-<style scoped lang="scss">
+<style  lang="scss">
 
+.warm-row {
+  background-color: rgb(154, 154, 154) !important;
+}
 </style>