Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼

更新時間：2023年12月01日 10:32:25 作者：覺醒法師

Element-UI組件el-table用于展示多條結(jié)構(gòu)類似的數(shù)據(jù),可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作,本文給大家介紹Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼,感興趣的朋友一起看看吧

一、安裝element-ui

使用npm進(jìn)行安裝：

npm i element-ui -S

二、表頭實現(xiàn)

這里表頭實現(xiàn)比較簡單，代碼如下：

<template>
  <div>
    <el-table :data="tableStudentData" :span-method="reconstructionStuCell" style="width: 100%">
      <el-table-column type="index" label="序號" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column label="科目信息">
        <el-table-column prop="courseName" label="科目" width="80"></el-table-column>
        <el-table-column prop="date" label="日期" width="80"></el-table-column>
        <el-table-column prop="timeStr" label="考試時間" width="100"></el-table-column>
      </el-table-column>
      <el-table-column label="成績信息">
        <el-table-column prop="score" label="成績" width="60"></el-table-column>
        <el-table-column prop="scoreTotal" label="總分" width="60"></el-table-column>
        <el-table-column prop="total" label="滿分" width="60"></el-table-column>
        <el-table-column prop="totalAll" label="滿分總分" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.totalAll">{{scope.row.totalAll}} （及格率：{{parseInt(scope.row.scoreTotal/scope.row.totalAll*100)}}%）</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        tableData: [],
        tableStudentData: []
      }
    },
    created() {
    },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>
<style lang="scss">
</style>

此時表頭效果已形成，如下圖：

三、數(shù)據(jù)渲染

數(shù)據(jù)渲染這里較為復(fù)雜，這里為方便大家理解，進(jìn)行逐步拆解敘述。如有更好方法，也歡迎大家指點。

3.1 模擬數(shù)據(jù)

如上圖，在element-table目錄中，新建data.js文件，用于存儲模擬數(shù)據(jù)，代碼如下：

export const studentData = [
  {name: "李四", subject: [
    {courseName: "語文", date: "20日", timeStr: "09:00~11:30", score: 90, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 70, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 100, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 72, total: 100},
    {courseName: "英語", date: "22日", timeStr: "09:00~11:30", score: 95, total: 150},
  ]},
  {name: "王五", subject: [
    {courseName: "語文", date: "20日", timeStr: "09:00~11:30", score: 85, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 60, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 90, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 68, total: 100},
    {courseName: "英語", date: "22日", timeStr: "09:00~11:30", score: 75, total: 150},
  ]},
  {name: "小美", subject: [
    {courseName: "語文", date: "20日", timeStr: "09:00~11:30", score: 120, total: 150},
    {courseName: "政治", date: "20日", timeStr: "14:30~16:30", score: 85, total: 100},
    {courseName: "數(shù)學(xué)", date: "21日", timeStr: "09:00~11:30", score: 120, total: 150},
    {courseName: "歷史", date: "21日", timeStr: "14:30~16:30", score: 80, total: 100},
    {courseName: "英語", date: "22日", timeStr: "09:00~11:30", score: 130, total: 150},
  ]}
];

頁面中引入模擬數(shù)據(jù)，并賦值給表格的變量，代碼如下：

<script>
  import { studentData } from './data.js'
  export default {
    data(){
      return {
        tableStudentData: studentData
      }
    },
    created() { },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>

此時表格中可以正常渲染出部分?jǐn)?shù)據(jù)了，效果圖如下：

3.2 數(shù)據(jù)處理

如上圖會發(fā)現(xiàn)，科目和成績相關(guān)信息，未顯示出來。這里需要對數(shù)據(jù)進(jìn)行處理下，將所有科目信息調(diào)整到和姓名字段為同一行數(shù)據(jù)中。需要做以下幾步：

將subject二級數(shù)據(jù)全部移至name同級的同一行數(shù)據(jù)中。
將name字段原數(shù)據(jù)移至subject的第一行數(shù)據(jù)中；item和sub進(jìn)行合并。
無subject子項數(shù)據(jù)的，保持原數(shù)據(jù)輸出。

在data.js中，添加重構(gòu)數(shù)據(jù)reconstructionStuData()函數(shù)，代碼如下：

/**
 * 重構(gòu)學(xué)生數(shù)據(jù) 并返回
 */
export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ }, item, sub);
        }
        //其他行數(shù)據(jù)無須添加 姓名字段信息（第一行數(shù)據(jù)會合并到結(jié)束位置，填充后也會被覆蓋）
        else{
          subData = Object.assign({ }, sub);
        }
        //if end
        tmpData.push( subData );
      });
    }
    //subject無子項數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ }, item)
      );
    }
  });
  return tmpData;
}

引入reconstructionStuData()函數(shù)，代碼如下：

<script>
  import { reconstructionStuData, studentData } from './data.js'
  export default {
    data(){
      return {
        tableStudentData: studentData
      }
    },
    created() {
      this.tableStudentData = reconstructionStuData(studentData);
    },
    methods: {
      /**
       * 合并單元格數(shù)據(jù)
       */
      reconstructionStuCell({ row, column, rowIndex, columnIndex }){
      }
      //end
    }
  }
</script>

此時表格效果圖如下：

3.4 圖解

如上圖，

列（姓名）位于列的第1位置（起始從0開始，所以序號為第0位置），往下合并subject數(shù)組長度位置即可。
列（總分）位于列的第6位置，往下合并subject數(shù)組長度位置即可。
列（滿分總分）位于列的第8位置，往下合并subject數(shù)組長度位置即可。

這是我們會發(fā)現(xiàn)，methods中定義的reconstructionStuCell()函數(shù)還未使用，通過給table傳入span-method方法可以實現(xiàn)合并行或列，方法的參數(shù)是一個對象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號rowIndex、當(dāng)前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表rowspan，第二個元素代表colspan。也可以返回一個鍵名為rowspan和colspan的對象。

span-method相當(dāng)于從數(shù)據(jù)單元格第一行開始，每行每列開始循環(huán)執(zhí)行，想當(dāng)于 9 * 15 執(zhí)行135次，通過函數(shù)中 rowIndex, columnIndex字段進(jìn)行判斷當(dāng)前循環(huán)是哪行哪列，并作對應(yīng)處理。

這里我們添加以下邏輯，在每行數(shù)據(jù)中添加姓名、總分，滿分總分對應(yīng)columnIndex1、columnIndex6、columnIndex8字段，用來存儲需要返回的colspan和rowspan數(shù)據(jù)，代碼如下：

reconstructionStuCell({ row, column, rowIndex, columnIndex }){
    let column1Data = row['columnIndex1'];
    let column6Data = row['columnIndex6'];
    let column8Data = row['columnIndex8'];
    //判斷條件滿足情況下，返回對應(yīng)的rowspan和colspan數(shù)據(jù)
    if(
      (column1Data&&column1Data.columnIndex==columnIndex) ||      //姓名組合并
      (column6Data&&column6Data.columnIndex==columnIndex) ||      //總分組合并
      column8Data&&column8Data.columnIndex==columnIndex           //滿分總分組合并
    ){
      return row['columnIndex'+columnIndex];
    }
    //if end
  }

比如執(zhí)行span-method方法時，此時獲取row數(shù)據(jù)中columnIndex1，columnIndex1中的columnIndex值為1，與span-method方法中columnIndex進(jìn)行對比。
1、此時每行中列1都會被匹配到，列1行1返回{colspan: 1, rowspan: 5}，則往下合并5個單元格；
2、列1行2返回{colspan: 0, rowspan: 0}，則單元格不渲染，否則此行多一個單元格會錯位；
3、列1行3，列1行4...... 同理。

列6（總分）、列8（滿分總分）同理，通過columnIndex6和columnIndex8進(jìn)行判斷，進(jìn)行單元格合并。

以上代碼添加后，發(fā)現(xiàn)表格并無任何變化，這是因為重構(gòu)數(shù)據(jù)函數(shù)中，還未添加對應(yīng)的columnIndex1、columnIndex6、columnIndex8字段。

3.5 合并列 - 姓名

首先，我們來合并（姓名）這列數(shù)據(jù)，將每行數(shù)據(jù)中添加columnIndex1，子屬性變量columnIndex表示合并對應(yīng)的列位置。

subject有子項數(shù)據(jù)除第一行數(shù)據(jù)，后面所有rowspan和colspan為0，第1個單元往下合并后，會填充其他行空缺位置。

subject無子項數(shù)據(jù)rowspan和colspan為1，保留原位置渲染。如為0則當(dāng)前單元格不被渲染，表格會錯亂。

代碼如下：

export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);
        }
        //其他行數(shù)據(jù)無須添加 姓名字段信息（第一行數(shù)據(jù)會合并到結(jié)束位置，填充后也會被覆蓋）
        else{
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);
        }
        //if end
        tmpData.push( subData );
      });
    }
    //無子項數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item)
      );
    }
  });
  return tmpData;
}

此時大家看到表格的（姓名）列，已合并到對應(yīng)長度，效果圖如下：

3.6 合并列 - 總分和滿分總分

總分和滿分總分合并部分，和（姓名）列同理，但多出一步則需計算出對應(yīng)科目的總分和所有科目的滿分總分。

增加第6列和第8列合并數(shù)據(jù)columnIndex6和columnIndex8，并新增scoreTotal和totalAll分別保存總分和滿分總分結(jié)果。

代碼如下：

export const reconstructionStuData = data => {
  if(!Array.isArray(data)) return [];
  let tmpData = [];
  data.forEach((item, i) => {
    //有二級數(shù)據(jù)的進(jìn)行處理
    if(Array.isArray(item.subject)&&item.subject.length>0){
      //循環(huán)成績
      item.subject.forEach((sub, j) => {
        let subData = {};
        if(j==0){
          //子項第一行數(shù)據(jù)，和姓名信息同行
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);
          //計算總分
          subData['scoreTotal'] = item.subject.reduce((total, value) => {
            return total + value.score;
          }, 0);
          subData['columnIndex6'] = { columnIndex: 6, rowspan: item.subject.length, colspan: 1 };
          //計算滿分總分
          subData['totalAll'] = item.subject.reduce((total, value) => {
            return total + value.total;
          }, 0);
          subData['columnIndex8'] = { columnIndex: 8, rowspan: item.subject.length, colspan: 1 };
        }
        //其他行數(shù)據(jù)無須添加 姓名字段信息（第一行數(shù)據(jù)會合并到結(jié)束位置，填充后也會被覆蓋）
        else{
          subData = Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);
          //總分和滿分總分 被合并部分單元格填寫為0
          subData['columnIndex6'] = { columnIndex: 6, rowspan: 0, colspan: 0 };
          subData['columnIndex8'] = { columnIndex: 8, rowspan: 0, colspan: 0 };
        }
        //if end
        tmpData.push( subData );
      });
    }
    //無子項數(shù)據(jù)，保留當(dāng)前位置輸出
    else{
      tmpData.push(
        Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item)
      );
    }
  });
  return tmpData;
}

此時，咱們需要的表格就被渲染出來了，如下圖：

3.7 span-method優(yōu)化

reconstructionStuCell()函數(shù)中對列的合并參數(shù)一一取出，這樣會比較繁瑣，通過for循環(huán)對row行內(nèi)數(shù)據(jù)進(jìn)行查詢，并通過columnIndex判斷對應(yīng)列及返回結(jié)果。代碼如下：

reconstructionCell({ row, column, rowIndex, columnIndex }){
    for(var key in row){
     //匹配列數(shù)據(jù)
     if(/columnIndex/.test(key)&&'undefined'!==typeof row[key]['columnIndex']){
       //關(guān)聯(lián)對應(yīng)列，并返回合并參數(shù)
       if(row[key].columnIndex == columnIndex){
         return {
           rowspan: row[key].rowspan,
           colspan: row[key].colspan
         }
       }
     }
    }
}

這里reconstructionStuData()函數(shù)處理能力還是相對不足，只能處理特定的表格合并。希望對大家有所幫助，僅供大家參考！

到此這篇關(guān)于Element-UI實現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼的文章就介紹到這了,更多相關(guān)Element-UI復(fù)雜表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: