elementui-table表头合并和纵向排列

使用 elementui 做项目的时候大家应该会遇到很多关于表格的需求

下面是总结的两个项目中遇到的问题.

查看文档的话是很简单, 但是很多需求还是需要大家自己去写的.

第一个 --- 表格合并

1. 需求页面如下:

这个需求如果直接用 js 写的话就太简单了.但是使用 vue, 就需要自己修改了. 其实也不是很难,主要还是数据解析

各种合并

2. 数据结构如下:

 var list = [
        {
          "id": "16EE8A54E6917F6479905CDC5B031F22",
          "activityPointsDOS": [
            {
              "id": "16EE8A54E0C17F647404A2DC7783EE88",
              "activityPointsDOS": [
                {
                  "id": "1",
                  "value": "6",
                  "activityName": "坚定政治立场。",
                  "message": " （1）牢固树立“四个意识”巴拉巴拉",
                  "period": "19上半年"
                },
                {
                  "id": "2",
                  "value": "8",
                  "activityName": "坚定政治立场。",
                  "message": "（2）严格遵守政治纪律和政治规矩.巴拉啦",
                  "period": "19上半年"
                }
              ],
              "activityName": "1. 坚定政治立场。(10分)"
            },
            {
              "id": "16EE8A54E4817F64779EF35CC6671C10",
              "activityPointsDOS": [
                {
                  "id": "3",
                  "value": "7",
                  "activityName": "坚持学习提高。",
                  "message": "（1）及时认真参加支部集体学习....",
                  "period": "19上半年"
                },
                {
                  "id": "4",
                  "value": "3",
                  "activityName": "坚持学习提高。",
                  "message": "（2）每年集中学习培训....",
                  "period": "19上半年"
                },
                {
                  "id": "5",
                  "value": "5",
                  "activityName": "坚持学习提高。",
                  "message": "（3）有取得更高....位",
                  "period": "19上半年"
                }
              ],
              "activityName": "2.坚持学习提高。(6分)"
            },
            {
              "id": "16EE8A54E4817F64779EF35CC6671C10",
              "activityPointsDOS": [
                {
                  "id": "6",
                  "value": "7",
                  "activityName": "严格组织生活。",
                  "message": "（1）按季度.....",
                  "period": "19上半年"
                },
                {
                  "id": "7",
                  "value": "3",
                  "activityName": "严格组织生活。",
                  "message": "（2）按时上党课.......。",
                  "period": "19上半年"
                },
                {
                  "id": "8",
                  "value": "5",
                  "activityName": "坚持学习提高。",
                  "message": "（3）积极参加",
                  "period": "19上半年"
                }
              ],
              "activityName": "3.严格组织生活。(13分)"
            }
          ],
          "category": "合格积分\r\n(40分)"
        },
        {
          "id": "16EE8A54FF617F6491391BD04A0D4E7F",
          "activityPointsDOS": [
            {
              "id": "16EE8A54EA517F647D257760897C805F",
              "activityPointsDOS": [
                {
                  "id": "8",
                  "value": "10",
                  "activityName": "1.所在基层党组织情况。（10分）",
                  "message": " (1) 根据所在.....",
                  "period": "19上半年"
                }
              ],
              "activityName": "1.所在基层党组织情况。（10分）"
            },
            {
              "id": "16EE8A54E8517F647B3DE374CF0D6D93",
              "activityPointsDOS": [
                {
                  "id": "10",
                  "value": "3",
                  "activityName": "2.年度评议、考核情况。（10分）",
                  "message": " (1) 在党建....",
                  "period": "19上半年"
                },
                {
                  "id": "9",
                  "value": "10",
                  "activityName": "2.年度评议、考核情况。（10分）",
                  "message": " (2）在年度.........................................................................",
                  "period": "19上半年"
                }
              ],
              "activityName": "2.年度评议、考核情况。（10分）"
            }
          ],
          "category": "综合积分\r\n（20分）"
        }
      ];

3. 代码如下:

<el-table
        :data="alldata"
        :span-method="arraySpanMethod"
        border
        style="width: 100%">
        <el-table-column
          prop="category"
          label="项目及分值"
          width="180">
        </el-table-column>
        <el-table-column
          prop
          label="参考标准及评价方法">
          <el-table-column prop="activityName"></el-table-column>
          <el-table-column prop="message"></el-table-column>
        </el-table-column>
        <el-table-column
          prop="value"
          label="参考分值">
        </el-table-column>
      </el-table>

// 1. 获取后台数据
    created() {
      // 二次处理数据
      this.alldata = this.handleTableArr(list);
      console.log(this.alldata);
    },

 methods: {
      // 解析数据
      handleTableArr(data) {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          let category_info = data[i];
          let activityPointsDOS = category_info["activityPointsDOS"];
          let count = 0;
          for (let j = 0; j < activityPointsDOS.length; j++){
            let activityTwo_info = activityPointsDOS[j];
            let activityTwo_activityPointsDOS = activityPointsDOS[j]["activityPointsDOS"];
            for (let k = 0; k < activityTwo_activityPointsDOS.length; k++){
              count ++;
                  let info = {
                     // 确定每天数据的 合并行的数量
                      span_num: k === 0 ? activityTwo_activityPointsDOS.length : 0,
                      value:activityTwo_activityPointsDOS[k]["value"],
                      message:activityTwo_activityPointsDOS[k]["message"],
                      activityName:activityTwo_info["activityName"],
                      category: category_info["category"],
                  };
                  arr.push(info);
            }
          }
// 第一列的合并数量, 赋值给每个大项的第一个单元格. 比如合格积分要合并 8 行.
          arr[arr.length - count]["count"] = count;
        }
        return arr;
      },
    // 表格合并的方法
      arraySpanMethod({row, column, rowIndex, columnIndex}) {
        // 第一列
        if (columnIndex === 0){
          if (row.count){
            return [row.count, 1]
          }else{
            return [0, 0]
          }
        }
      // 第二列
         if (columnIndex === 1){
            if (row.span_num > 0 ){
              return [row.span_num, 1]
            }else{
              return [0, 0]
            }
          }
      }
    }

 

第二个 --- 表格纵向表头

官网上的案例都是横向的表格, 如下图:

image

而经常会遇到的需求就是纵向的表头. 数据结构不同, 写法也不一样, 各取所需.

1. 需求页面如下:

纵向

2. 数据结构如下:

补充说明: list 中的 id 是学生的日志 id, 如果 id 为 0 说明当天日志没有完成,将显示未完成, 如果有将显示可查看

loginfo: {
      'students': [
              {
                 'id':1,
                 'name':'张三',
                 'list': [
                      {'id':11},
                      {'id':0},
                      {'id':0},
                      {'id':0}]
              },
              {
                  'id':2,
                  'name':'李四',
                  'list': [
                      {'id':'21'},
                      {'id':0},
                      {'id':0},
                      {'id':0}]
              },
              {
                  'id':3,
                  'name':'王二麻子',
                  'list': [
                      {'id':0},
                      {'id':0},
                      {'id':0},
                      {'id':36}]
              }
      ],
      'dateList': ['06-01','06-02','06-03','06-04']
}

3. 代码如下:

        <el-table
            :data="loginfo.students"
            border
            style="width: 100%">
            <el-table-column
              prop="name"
              width="150"
              align="center"
              label="姓名/日期"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in loginfo.dateList'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                  <el-tag @click="showLog(scope.row, i)"
                          :type="scope.row.list[i].id != 0 ? 'success' : 'danger'"> {{scope.row.list[i].id != 0 ? '可查看' : '未完成'}}</el-tag>
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>

转自简书小椰子表姐G