try-vuejswithOverHead(2)

a.change item model b.add 'sumation' calculation c.add 'editable' property

by cactus77kiki

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>    
    <div id="vapp" style="margin:20px;">
      <h5>
        {{queryVal.queryYM}}  {{queryVal.queryKind}}
      </h5>
      {{operateMode}}<br/>
      <!--資料顯示-->
      <table id="estimators">
        <!--年度-->
        <thead>
        <tr >
            <th>{{headerYearVal.ItemName}}</th>
            <th v-bind:colspan="headerYearVal.Currents.ColMerge" >{{headerYearVal.Currents.Text}}</th>
            <th v-bind:colspan="headerYearVal.Nexts.ColMerge" >{{headerYearVal.Nexts.Text}}</th>            
            <th v-for="row in headerYearVal.Years" >{{row}}</th>
            <th>{{headerYearVal.YearTotal}}</th>
          </tr>  
        </thead> 
        <!--月份-->
        <tbody>
          <tr>
           <td class="monthtyle">{{headerMonthVal.ItemName}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Currents">{{row}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Nexts">{{row}}</td>
           <td class="monthtyle" v-for="row in headerMonthVal.Years">{{row}}</td>
           <td class="monthtyle">{{headerMonthVal.YearTotal}}</td>
         </tr>
        </tbody>
        <!--資料列-->
        <tbody v-for="item in dataVal">         
         <tr >  
           <td>{{item.ItemName}}</td>
           <td v-for="colitem in item.ItemData" v-if="colitem.Display=='Y'">
             <span v-if="operateMode.mQuery || ((!operateMode.mQuery) && colitem.Editable=='N')"...

CSS

#estimators {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#estimators td, #estimators th {
  border: 1px solid #ddd;
  padding: 8px;
}

/*#estimators tr:nth-child(even){background-color: #f2f2f2;}*/  /*隔行變色*/

#estimators tr:hover {background-color: #ddd;}

#estimators th {  
  text-align: center;
  background-color: #AED6F1 ;  /*header color*/
  /*color: white;*/
}
/*月份*/
.monthtyle{
  text-align: center;
  background-color: #AED6F1 ;
  font-weight: bold;
  /*text-decoration:underline;*/
}
/*小計*/
.substyle{
  background-color: #AED6F1 ;
  font-weight: bold;
}

JavaScript

/*調整:
  1.資料列模型
  2.新增小計計算*/
/*
ref:  https://stackoverflow.com/questions/43737304/add-up-all-values-of-a-property-in-an-array-vuejs
*/  
var appinstance = new Vue({
            el: '#vapp',
            data: {
                activetab: 1,                
                queryVal:{},	//查詢模型
                headerYearVal: {},   //年份            
                headerMonthVal:{},   //月份                            
                dataVal: [],	//資料
                subVal:{},	//小計                
            },
            watch:{
            	dataVal:{
              	handler: function (value) {    
                	let itemarry = [];
                  //小計欄:                  
                  for(let dataidx = 0; dataidx < value.length; dataidx++){
                  	let row = value[dataidx].ItemData;  
                    //let curryearsum = 0, nextyearsum = 0;	//current/next年度小計計算
                    let groupcurrent = row.filter(function (x) {
												return x.Current == 'Y' && x.Sub=='N';	//找到當年度資料&加總
										});
                  	let curryearsum = groupcurrent.reduce((acc, item) => Number(acc) + Number(item.Value),0);
                    let groupnext = row.filter(function (x) {
												return x.Next == 'Y' && x.Sub=='N';	//找到下年度資料&加總
										});
                    let nextyearsum = groupnext.reduce((acc, item) => Number(acc) + Number(item.Value),0);
                    let groupsub = row.filter(function (x) {
												return x.Sub == 'Y';	//所有年度小計資料&加總
									});
                    let subsum = groupsub.reduce((acc, item) => Number(acc) + Number(item.Value),0);     
                    
                    for(let rowidx = 0; rowidx < row.length; rowidx++){                    	
                      /*if(row[rowidx].Current=='Y' && row[rowidx].Sub=='N') curryearsum+= Number(row[rowidx].Value);
                      if(row[rowidx].Next=='Y' && row[rowidx].Sub=='N') nextyearsum+=Number(row[rowidx].Value);*/
                      
          ...