vue中el-table合并列的具體實現(xiàn)

更新時間：2023年04月20日 09:42:45 作者：水冗水孚

本文主要介紹了vue中el-table合并列的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

問題描述

有時候，產品讓我們做的表格，會有合并列的功能，但是官方的demo略有不清晰，本文舉個例子簡述之。我們先看下效果圖：

假設產品的需求是這樣的：設備類別那一列，同類的，做成分堆形式，也就是合并列形式

分析

分析寫在代碼注釋中里面哦

方式一計算以后再合并

<template>
  <div class="vueWrap">
    <el-table
      :span-method="objectSpanMethod"
      style="width: 800px"
      :data="tableBody"
      border
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <el-table-column
        type="index"
        label="序號"
        width="58"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="toolsKinds"
        label="設備類別"
        align="center"
      ></el-table-column>
      <el-table-column prop="toolsName" label="設備名稱" align="center"></el-table-column>
      <el-table-column prop="price" label="價格（元）" align="center"></el-table-column>
      <el-table-column prop="remark" label="備注" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表體數(shù)據(jù)
      tableBody: [
        {
          toolsKinds: "螺絲刀",
          toolsName: "一號螺絲刀",
          price: 10,
          remark: "",
        },
        {
          toolsKinds: "螺絲刀",
          toolsName: "二號螺絲刀",
          price: 20,
          remark: "",
        },
        {
          toolsKinds: "螺絲刀",
          toolsName: "三號螺絲刀",
          price: 30,
          remark: "",
        },
        {
          toolsKinds: "扳手",
          toolsName: "大號扳手",
          price: 88,
          remark: "",
        },
        {
          toolsKinds: "扳手",
          toolsName: "中號扳手",
          price: 44,
          remark: "",
        },
        {
          toolsKinds: "老虎鉗子",
          toolsName: "火星專供老虎鉗",
          price: 999,
          remark: "",
        },
        {
          toolsKinds: "老虎鉗子",
          toolsName: "土星專供老虎鉗",
          price: 1001,
          remark: "",
        },
      ],
      cellList: [], // 單元格數(shù)組
      count: null, // 計數(shù)
    };
  },
  mounted() {
    // 第1步，根據(jù)表體信息，計算合并單元格的信息
    this.computeCell(this.tableBody);
  },
  methods: {
    computeCell(tableBody) {
      // 循環(huán)遍歷表體數(shù)據(jù)
      for (let i = 0; i < tableBody.length; i++) {
        if (i == 0) {
          // 先設置第一項
          this.cellList.push(1); // 初為1，若下一項和此項相同，就往cellList數(shù)組中追加0
          this.count = 0; // 初始計數(shù)為0
          console.log("索引", 0, this.count);
        } else {
          // 判斷當前項與上項的設備類別是否相同，因為是合并這一列的單元格
          if (tableBody[i].toolsKinds == tableBody[i - 1].toolsKinds) {
            // 如果相等
            this.cellList[this.count] += 1; // 增加計數(shù)
            this.cellList.push(0); // 相等就往cellList數(shù)組中追加0
            console.log("索引", i, this.count);
          } else {
            this.cellList.push(1); // 不等就往cellList數(shù)組中追加1
            this.count = i; // 將索引賦值為計數(shù)
            console.log("索引", i, this.count);
          }
        }
      }
    },
    // 第2步，將計算好的結果返回給el-table，這樣的話表格就會根據(jù)這個結果做對應合并列渲染
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 給第二列做單元格合并。0是第一列，1是第二列。
      if (columnIndex === 1) {
        console.log("單元格數(shù)組，若下一項為0，則代表合并上一項", this.cellList);
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          console.log(`動態(tài)豎向合并單元格, 第${colCell}列，豎向合并${rowCell}個單元格 `);
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          // 清除原有的單元格，必須要加，否則就會出現(xiàn)單元格會被橫著擠到后面了?。?！
          // 本例中數(shù)據(jù)是寫死的不會出現(xiàn)，數(shù)據(jù)若是動態(tài)后端獲取的，就會出現(xiàn)了?。?！
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

打印截圖

注意打印的結果

方式二直接合并（更直觀的做法）

適用于固定的數(shù)據(jù)，比如年度、季度等...

<template>
  <div id="kkk">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序號" width="50"> </el-table-column>
      <el-table-column prop="type" label="設備類別" align="center">
      </el-table-column>
      <el-table-column prop="mcName" label="設備名稱" align="center">
      </el-table-column>
      <el-table-column prop="price" label="價格" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          type: "螺絲刀",
          mcName: "一號螺絲刀",
          price: "10",
        },
        {
          type: "螺絲刀",
          mcName: "二號螺絲刀",
          price: "20",
        },
        {
          type: "螺絲刀",
          mcName: "三號螺絲刀",
          price: "30",
        },
        {
          type: "扳手",
          mcName: "大號扳手",
          price: "88",
        },
        {
          type: "扳手",
          mcName: "中號扳手",
          price: "44",
        },
        {
          type: "老虎鉗子",
          mcName: "火星專供",
          price: "999",
        },
        {
          type: "老虎鉗子",
          mcName: "土星專供",
          price: "1001",
        },
      ],
    };
  },
  methods: {
    /**
     * 1. 若是objectSpanMethod不返回任何東西，表格不會變化
     * 2. 最外層的判斷一般是，先從第幾列開始合并
     * 3. 這次從第0行合并2個，下次就要從第3行開始合并（0行加倆，就到3行了）
     * 4. 這種方式是有多少條數(shù)據(jù)，合并多少條數(shù)據(jù)，比如本案例中有7條數(shù)據(jù)（從第0條合并到第7條）
     * 5. return { rowspan: 0, colspan: 0 } // 表示不合并
     * */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log("rowIndex", rowIndex);
      // 準備在第二列進行合并操作
      if (columnIndex == 1) {
        // 從第0行進行合并
        if (rowIndex == 0) {
          return {
            rowspan: 3, // 合并3行
            colspan: 1, // 合并1列（當前列）
          };
        }
        if (rowIndex == 3) {
          return {
            rowspan: 2, // 合并2行
            colspan: 1, // 合并1列
          };
        }
        if (rowIndex == 5) {
          return {
            rowspan: 2, // 合并1行
            colspan: 1, // 合并1列
          };
        }
      }
    },
  },
};
</script>

到此這篇關于vue中el-table合并列的具體實現(xiàn)的文章就介紹到這了,更多相關vue el-table合并列內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue網(wǎng)頁html轉換PDF（最低兼容ie10）的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁html轉換PDF（最低兼容ie10）的思路詳解,實現(xiàn)此功能需要引入兩個插件，需要的朋友可以參考下
2017-08-08
vue中的H5移動端項目?真機測試配置方式
這篇文章主要介紹了vue中的H5移動端項目?真機測試配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Elementui如何限制el-input框輸入小數(shù)點
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue如何實現(xiàn)iframe的上一步、下一步操作
這篇文章主要介紹了Vue如何實現(xiàn)iframe的上一步、下一步操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue將頁面導出為圖片或者PDF
這篇文章主要為大家詳細介紹了Vue導出頁面為PDF格式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
bootstrap vue.js實現(xiàn)tab效果
這篇文章主要為大家詳細介紹了bootstrap vue.js實現(xiàn)tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
日常業(yè)務開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
基于Vue-cli快速搭建項目的完整步驟
這篇文章主要給大家介紹了關于如何基于Vue-cli快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-11-11
基于vue通用表單解決方案的思考與分析
這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-03-03