devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element行合并加点击单元格修改_element-plus table合并行后自定义内容

作者：从前慢现在也慢 | 2024-03-21 08:50:24

赞

踩

element-plus table合并行后自定义内容

 项目需求类似上图行合并其中有统计的小计和合计，后端返回数据并不是在同一个数组内，而是返回三个数组，基本数据数组、小计数组和合计数组。废话不多说，上代码

  1. <template>
  2.   <div>
  3.     <el-table ref="tableData" :data="tableData" style="width: 100%" :span-method="spanMethod" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-class-name="tableRowClassName" @cell-click="tabClick">
  4.       <el-table-column prop="name" label="游戏名称" align="center" width="40"></el-table-column>
  5.       <el-table-column prop="type" label="游戏设备" align="center"></el-table-column>
  6.       <el-table-column label="数据" align="center">
  7.         <el-table-column prop="meterName" label="人物名称" align="center"></el-table-column>
  8.         <el-table-column prop="totalNum" label="总场次" align="center"></el-table-column>
  9.         <el-table-column prop="totalRate" label="总胜率" align="center"></el-table-column>
  10.       </el-table-column>
  11.       <el-table-column label="对战数据" align="center">
  12.         <el-table-column prop="totalMeter" label="总计" align="center"></el-table-column>
  13.         <el-table-column label="排位数据" align="center">
  14.           <el-table-column prop="rankingCloseMeter" label="合计" align="center"></el-table-column>
  15.           <el-table-column prop="rankingNum" label="排位场次" align="center">
  16.             <template slot-scope="scope">
  17.               <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '排位场次'">
  18.                 <el-input v-model="scope.row.rankingNum" maxlength="300" placeholder="请输入排位场次" size="small" @blur="inputBlur"/>
  19.               </span>
  20.               <span v-else>{{ scope.row.rankingNum }}</span>
  21.             </template>
  22.           </el-table-column>
  23.           <el-table-column prop="rankingRate" label="排位胜率" align="center" width="100">
  24.             <template slot-scope="scope">
  25.               <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '排位胜率'">
  26.                 <el-input :rows="3" type="textarea" v-model="scope.row.rankingRate" maxlength="300" placeholder="请输入排位胜率" size="small" @blur="inputBlur"/>
  27.               </span>
  28.               <span v-else>{{ scope.row.rankingRate }}</span>
  29.             </template>
  30.           </el-table-column>
  31.           <el-table-column prop="rankingAverage" label="排位平均经济" align="center">
  32.             <template slot-scope="scope">
  33.               <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '排位平均经济'">
  34.                 <el-input v-model="scope.row.rankingAverage" maxlength="300" placeholder="请输入排位平均经济" size="small" @blur="inputBlur"/>
  35.               </span>
  36.               <span v-else>{{ scope.row.rankingAverage }}</span>
  37.             </template>
  38.           </el-table-column>
  39.         </el-table-column>
  40.         <el-table-column label="其他数据" align="center">
  41.           <el-table-column prop="enterCloseMeter" label="合计" align="center"></el-table-column>
  42.           <el-table-column label="深渊大乱斗" align="center">
  43.             <el-table-column prop="Subtotal" label="小计" align="center"></el-table-column>
  44.             <el-table-column prop="enterAbyssNum" label="深渊大乱斗场次" align="center">
  45.               <template slot-scope="scope">
  46.                 <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '深渊大乱斗场次'">
  47.                   <el-input v-model="scope.row.enterAbyssNum" maxlength="300" placeholder="请输入深渊大乱斗场次" size="small" @blur="inputBlur"/>
  48.                 </span>
  49.                 <span v-else>{{ scope.row.enterAbyssNum }}</span>
  50.               </template>
  51.             </el-table-column>
  52.             <el-table-column prop="enterAbyssRate" label="深渊大乱斗胜率" align="center" show-overflow-tooltip>
  53.               <template slot-scope="scope">
  54.                 <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '深渊大乱斗胜率'">
  55.                   <el-input v-model="scope.row.enterAbyssRate" maxlength="300" placeholder="请输入深渊大乱斗胜率" size="small" @blur="inputBlur"/>
  56.                 </span>
  57.                 <span v-else>{{ scope.row.enterAbyssRate }}</span>
  58.               </template>
  59.             </el-table-column>
  60.             <el-table-column prop="enterAbyssAverage" label="深渊大乱斗平均经济" align="center">
  61.               <template slot-scope="scope">
  62.                 <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '深渊大乱斗平均经济'">
  63.                   <el-input v-model="scope.row.enterAbyssAverage" maxlength="300" placeholder="请输入深渊大乱斗平均经济" size="small" @blur="inputBlur"/>
  64.                 </span>
  65.                 <span v-else>{{ scope.row.enterAbyssAverage }}</span>
  66.               </template>
  67.             </el-table-column>
  68.           </el-table-column>
  69.           <el-table-column label="日之塔" align="center">
  70.             <el-table-column label="日之塔场次" prop="enterSunNum" align="center">
  71.               <template slot-scope="scope">
  72.                 <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '日之塔场次'">
  73.                   <el-input v-model="scope.row.enterSunNum" maxlength="300" placeholder="请输入日之塔场次" size="small" @blur="inputBlur"/>
  74.                 </span>
  75.                 <span v-else>{{ scope.row.enterSunNum }}</span>
  76.               </template>
  77.             </el-table-column>
  78.             <el-table-column label="平均得分" prop="enterSunAverage" align="center">
  79.               <template slot-scope="scope">
  80.                 <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '平均得分'">
  81.                   <el-input v-model="scope.row.enterSunAverage" maxlength="300" placeholder="请输入平均得分" size="small" @blur="inputBlur"/>
  82.                 </span>
  83.                 <span v-else>{{ scope.row.enterSunAverage }}</span>
  84.               </template>
  85.             </el-table-column>
  86.           </el-table-column>
  87.         </el-table-column>
  88.         <el-table-column label="在各位置发挥" align="center">
  89.           <el-table-column label="中路" prop="middle" align="center" width="100"></el-table-column>
  90.           <el-table-column label="对抗路" prop="upper" align="center" width="100"></el-table-column>
  91.           <el-table-column label="发育路" prop="lower" align="center" width="100"></el-table-column>
  92.           <el-table-column label="打野" prop="wild" align="center" width="100"></el-table-column>
  93.           <el-table-column label="游走" prop="wander" align="center" width="100"></el-table-column>
  94.         </el-table-column>
  95.       </el-table-column>
  96.     </el-table>
  97.   </div>
  98. </template>
  99.  
  100. <script>
  101. export default {
  102.   data(){
  103.     return{
  104.       tableData:[],
  105.       testArr1:[],
  106.       testArr2:[],
  107.       testArr3:[],
  108.       testArr4:[],
  109.       testArr5:[],
  110.       testArr6:[],
  111.       testPosition1:0,
  112.       testPosition2:0,
  113.       testPosition3:0,
  114.       testPosition4:0,
  115.       testPosition5:0,
  116.       testPosition6:0,
  117.       tabClickIndex:null,
  118.       tabClickLabel:"",
  119.     }
  120.   },
  121.   methods:{
  122.     getTablist(){
  123.       setTimeout(()=>{
  124.         //表格数据
  125.         let data=[
  126.           {name:"王者荣耀",type:"手机",meterName:"貂蝉",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"良",lower:"良",wild:"优",wander:"优"},
  127.           {name:"王者荣耀",type:"手机",meterName:"西施",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"良",lower:"良",wild:"一般",wander:"优"},
  128.           {name:"王者荣耀",type:"手机",meterName:"王昭君",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"良",lower:"良",wild:"良",wander:"优"},
  129.           {name:"王者荣耀",type:"电脑",meterName:"杨玉环",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"一般",lower:"良",wild:"一般",wander:"优"},
  130.           {name:"王者荣耀",type:"电脑",meterName:"不知火舞",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"一般",lower:"良",wild:"优",wander:"优"},
  131.           {name:"王者荣耀",type:"手表",meterName:"诸葛亮",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"差",lower:"良",wild:"优",wander:"优"}
  132.         ]
  133.         //小计数据
  134.         let subtotal=[
  135.           {name:"王者荣耀",type:"手机",meterName:"",totalNum:"240000",totalRate:"63",totalMeter:"150000",rankingCloseMeter:"90000",rankingNum:"90000",rankingRate:"76",rankingAverage:"45000",enterCloseMeter:"60000",Subtotal:"30000",enterAbyssNum:"26100",enterAbyssRate:"12900",enterAbyssAverage:"69",enterSunNum:"522000",enterSunAverage:"4100",middle:"优",upper:"良",lower:"良",wild:"",wander:""},
  136.           {name:"王者荣耀",type:"电脑",meterName:"",totalNum:"160000",totalRate:"63",totalMeter:"10000",rankingCloseMeter:"60000",rankingNum:"60000",rankingRate:"76",rankingAverage:"30000",enterCloseMeter:"40000",Subtotal:"20000",enterAbyssNum:"11400",enterAbyssRate:"8600",enterAbyssAverage:"69",enterSunNum:"348000",enterSunAverage:"3400",middle:"优",upper:"一般",lower:"良",wild:"",wander:""},
  137.           {name:"王者荣耀",type:"手表",meterName:"",totalNum:"80000",totalRate:"63",totalMeter:"50000",rankingCloseMeter:"30000",rankingNum:"30000",rankingRate:"76",rankingAverage:"15000",enterCloseMeter:"20000",Subtotal:"10000",enterAbyssNum:"5700",enterAbyssRate:"4300",enterAbyssAverage:"69",enterSunNum:"174000",enterSunAverage:"1700",middle:"优",upper:"差",lower:"良",wild:"",wander:""}
  138.         ]
  139.         //合计数据
  140.         let total=[
  141.           {name:"王者荣耀",type:"手表",meterName:"",totalNum:"480000",totalRate:"63",totalMeter:"300000",rankingCloseMeter:"180000",rankingNum:"180000",rankingRate:"76",rankingAverage:"90000",enterCloseMeter:"120000",Subtotal:"60000",enterAbyssNum:"34200",enterAbyssRate:"25800",enterAbyssAverage:"69",enterSunNum:"1044000",enterSunAverage:"10200",middle:"",upper:"",lower:"",wild:"",wander:""}
  142.         ]
  143.         //找到游戏设备不同的位置 并在此位置添加小计数据
  144.         let subtotalArr=this.listOut(data,'type')
  145.         subtotalArr.forEach((item,index)=>{
  146.           subtotal[index].type="小计"
  147.           data.splice(item+index,0,subtotal[index]);
  148.         })
  149.         //找到游戏名称不同的位置 并在此位置添加合计数据
  150.         let totalArr=this.listOut(data,'name')
  151.         totalArr.forEach((item,index)=>{
  152.           total[index].name="合计"
  153.           data.splice(item+index,0,total[index]);
  154.         })
  155.         //数据处理完成后把保存合并行数据下标的数组清空，如果下次展示此表格为刷新可以不清，但如果是同页面切换数据需要清空
  156.         //对应此表格可能为切换为各个国家或各个地区
  157.         this.testArr1=[]
  158.         this.testArr2=[]
  159.         this.testArr3=[]
  160.         this.testArr4=[]
  161.         this.testArr5=[]
  162.         this.tableData=data
  163.         this.rowspan(this.testArr1, this.testPosition1, "name");
  164.         this.rowspan(this.testArr2, this.testPosition2, "type");
  165.         this.rowspan(this.testArr3, this.testPosition3, "middle");
  166.         this.rowspan(this.testArr4, this.testPosition4, "upper");
  167.         this.rowspan(this.testArr5, this.testPosition5, "lower");
  168.         this.rowspan(this.testArr6, this.testPosition6, "wander");
  169.       },200)
  170.     },
  171.     //处理数据
  172.     listOut(list,nm){
  173.       let data=list
  174.       let arr=[]
  175.       data.forEach((item,index)=>{
  176.         if(data.length==1){
  177.           arr=[1]
  178.         }else if(data.length==2){
  179.           if(index==0){
  180.             return false
  181.           }else if(data[index][nm]!==data[index-1][nm]){
  182.             arr=[1,2]
  183.           }else if(data[index][nm]===data[index-1][nm]){
  184.             arr=[2]
  185.           }
  186.         }else if(data.length>2){
  187.           if(index==0){
  188.             return false
  189.           }else if(data[index][nm]!==data[index-1][nm]){
  190.             if(index==data.length-1){
  191.               arr.push(index)
  192.               arr.push(data.length)
  193.             }else{
  194.               arr.push(index)
  195.             }
  196.           }else if(index==data.length-1){
  197.             arr.push(data.length)
  198.           }
  199.         }
  200.       })
  201.       return arr
  202.     },
  203.     //获取合并列数组
  204.     rowspan(spanArr, position, spanName) {
  205.       this.tableData.forEach((item, index) => {
  206.         if (index === 0) {
  207.           spanArr.push(1);
  208.           position = 0;
  209.         } else {
  210.           if ( this.tableData[index][spanName] === this.tableData[index - 1][spanName] ) {
  211.             spanArr[position] += 1;
  212.             spanArr.push(0);
  213.           } else {
  214.             spanArr.push(1);
  215.             position = index;
  216.           }
  217.         }
  218.       });
  219.     },
  220.     //合并单元格规则
  221.     spanMethod({ row, column, rowIndex, columnIndex }){
  222.       if(row.name =="合计"){
  223.         if(column.label=="游戏名称"){
  224.           return { rowspan:1,colspan:2 }
  225.         }else if(columnIndex===1){
  226.           return { rowspan:0,colspan:0 }
  227.         }
  228.       }
  229.       if(columnIndex === 0){
  230.         let _row=this.testArr1[rowIndex]
  231.         let _col=_row>0?1:0
  232.         return{rowspan: _row, colspan: _col}
  233.       }
  234.       if(columnIndex === 1){
  235.         let _row=this.testArr2[rowIndex]
  236.         let _col=_row>0?1:0
  237.         return{rowspan: _row, colspan: _col}
  238.       }
  239.       if(columnIndex === 17){
  240.         let _row=this.testArr3[rowIndex]
  241.         let _col=_row>0?1:0
  242.         return{rowspan: _row, colspan: _col}
  243.       }
  244.       if(columnIndex === 18){
  245.         let _row=this.testArr4[rowIndex]
  246.         let _col=_row>0?1:0
  247.         return{rowspan: _row, colspan: _col}
  248.       }
  249.       if(columnIndex === 19){
  250.         let _row=this.testArr5[rowIndex]
  251.         let _col=_row>0?1:0
  252.         return{rowspan: _row, colspan: _col}
  253.       }
  254.       if(columnIndex === 21){
  255.         let _row=this.testArr6[rowIndex]
  256.         let _col=_row>0?1:0
  257.         return{rowspan: _row, colspan: _col}
  258.       }
  259.     },
  260.  
  261.  
  262.  
  263.     //表格颜色样式
  264.     cellStyle({row, column, rowIndex, columnIndex}){
  265.       if(row.name=="合计" || row.type=="小计"){
  266.         return "color:red;"
  267.       }
  268.       if(column.label=="总计" || column.label=="合计" || column.label=="小计"){
  269.         return "color:red;"
  270.       }
  271.       if(column.label=="排位场次" || column.label=="排位胜率" || column.label=="排位平均经济" || column.label=="深渊大乱斗场次" || column.label=="深渊大乱斗胜率" || column.label=="深渊大乱斗平均经济" || column.label=="日之塔场次" || column.label=="平均得分"){
  272.         return "color:#409EFF;"
  273.       }
  274.     },
  275.     //表头颜色样式
  276.     headerCellStyle({row,column,rowIndex, columnIndex}){
  277.       if(column.label=="总计" || column.label=="合计" ||column.label=="小计"){
  278.         return "color:red;"
  279.       }
  280.       if(column.label=="排位场次" || column.label=="排位胜率" || column.label=="排位平均经济" || column.label=="深渊大乱斗场次" || column.label=="深渊大乱斗胜率" || column.label=="深渊大乱斗平均经济" || column.label=="日之塔场次" || column.label=="平均得分"){
  281.         return "color:#409EFF;"
  282.       }
  283.     },
  284.  
  285.  
  286.  
  287.     tableRowClassName({ row, rowIndex }) {
  288.       // 把每一行的索引放进row
  289.       row.index = rowIndex
  290.     },
  291.     //添加可修改的列
  292.     tabClick(row, column, cell, event) {
  293.       if(row.type!="小计" && row.name!="合计"){
  294.         switch (column.label) {
  295.           case '排位场次': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  296.           case '排位胜率': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  297.           case '排位平均经济': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  298.           case '深渊大乱斗场次': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  299.           case '深渊大乱斗胜率': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  300.           case '深渊大乱斗平均经济': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  301.           case '日之塔场次': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  302.           case '平均得分': this.tabClickIndex = row.index; this.tabClickLabel = column.label; break;
  303.           default: return
  304.         }
  305.       }
  306.     },
  307.      // 失去焦点初始化  并修改
  308.     inputBlur(row, event, column) {
  309.       this.tabClickIndex = null
  310.       this.tabClickLabel = ''
  311.     },
  312.   },
  313.   created(){
  314.     this.getTablist()
  315.   }
  316. }
  317. </script>

 其实并不建议使用代码中的方法，尽量让后端返回数据的时候只返回一个数组并排好序，毕竟前台处理数据比较慢。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/279863
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号