element 动态合并表格

element官网的合并仅限于简单的有规律的合并

需求: 将动态传入列的名称,实现该列相同的数据自动合并

初始图

 效果图

 

 

 

当然还会出现一定的其他需求,比如只允许第一列的值相同的情况下才允许第二列以及之后的列进行合并,这个需求在这次分享中并未体现,有需要的可以期待下一章(element 动态合并表格--进阶)

进阶实现的效果类似如下图:

tips: 如果采用这次的函数就会导致状态那一栏的已完成全部合并

若想实现当前者相同时才允许后者的相同值实现合并,则参考进阶写法

 

 

 

代码实现了采用html内嵌vue.js + element-ui

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8 </head>
  9 <div id="app">
 10     <el-table style="width:421px" :data="historyData" :span-method="objectSpanMethod" :border="true">
 11         <el-table-column prop="checkRoom" label="科室" align="center" width="140">
 12         </el-table-column>
 13         <el-table-column prop="checkProject" label="检查项目" align="center" width="140">
 14         </el-table-column>
 15         <el-table-column prop="attention" label="注意事项" align="center" width="140">
 16         </el-table-column>
 17     </el-table>
 18 </div>
 19 
 20 <body>
 21     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 22     <!-- 引入样式 -->
 23     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 24     <!-- 引入组件库 -->
 25     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 26     <script>
 27         new Vue({
 28             el: '#app',
 29             data: function () {
 30                 return {
 31                     historyData: [],
 32                 }
 33             },
 34             mounted() {
 35                 let dataArr = [{
 36                     checkRoom: 'CTROOM',
 37                     checkProject: '颈椎MRICT',
 38                     attention: '检查前空腹',
 39                 }, {
 40                     checkRoom: 'CTROOM',
 41                     checkProject: '颈椎MRICT1',
 42                     attention: '检查前空腹',
 43                 }, {
 44                     checkRoom: 'CTROOM',
 45                     checkProject: '颈椎MRICT1',
 46                     attention: '检查前空腹',
 47                 }, {
 48                     checkRoom: 'CTROOM',
 49                     checkProject: '颈椎MRICT1',
 50                     attention: '检查前空腹',
 51                 }, {
 52                     checkRoom: 'CTROOM',
 53                     checkProject: '颈椎MRICT3',
 54                     attention: '检查前空腹',
 55                 }, {
 56                     checkRoom: 'DR',
 57                     checkProject: '鼻骨',
 58                     attention: '检查前空腹',
 59                 }, {
 60                     checkRoom: 'DR',
 61                     checkProject: '鼻骨',
 62                     attention: '检查前空腹',
 63                 }, {
 64                     checkRoom: 'DR',
 65                     checkProject: '头骨',
 66                     attention: '检查前空腹',
 67                 }];
 68                 let dataSolve = this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])
 69                 this.historyData = dataArr;
 70             },
 71             methods: {
 72                 // 合并表格函数
 73                 mergeTableRow(data, merge) {
 74                     if (!merge || merge.length === 0) {
 75                         return data;
 76                     }
 77                     merge.forEach((m) => {
 78                         const mList = {};
 79                         data = data.map((v, index) => {
 80                             const rowVal = v[m];
 81                             if (mList[rowVal] && mList[rowVal].newIndex === index) {
 82                                 mList[rowVal]["num"]++;
 83                                 mList[rowVal]["newIndex"]++;
 84                                 data[mList[rowVal]["index"]][m + "-span"].rowspan++;
 85                                 v[m + "-span"] = {
 86                                     rowspan: 0,
 87                                     colspan: 0,
 88                                 };
 89                             } else {
 90                                 mList[rowVal] = {
 91                                     num: 1,
 92                                     index: index,
 93                                     newIndex: index + 1,
 94                                 };
 95                                 v[m + "-span"] = {
 96                                     rowspan: 1,
 97                                     colspan: 1,
 98                                 };
 99                             }
100                             return v;
101                         });
102                     });
103                     return data;
104                 },
105                 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
106                     const span = column["property"] + "-span";
107                     if (row[span]) {
108                         return row[span];
109                     }
110                 },
111             }
112         })
113     </script>
114 </body>
115 
116 </html>

 

函数解释

mergeTableRow就是合并代码的核心函数,他会将数据进行处理,处理成为符合objectSpanMethod实现表格合并的函数
入参:
　　data:    入参类型: 数组      入参描述: 需要处理的数据
　　
　　merge: 入参类型: 数组      入参描述: 需要合并的行的数组prop(对应列内容的字段名)
　　
　例如: 
　　this.mergeTableRow(dataArr, ["checkRoom", "checkProject"])
posted @ 2021-04-15 17:07  扰晨  阅读(619)  评论(2)  编辑  收藏  举报