vue+element實現表格跨行或跨列合併

火狼發表於2017-12-29

前言

vue+element用於pc後臺管理系統比較多,所以後臺管理系統一般以處理資料為主,資料結構的複雜程度變高,相對應的前端展示成本也提高,
有些產品經理或許會要求表格跨行或跨列合併,如果你正在想怎麼實現,那就接著往下看
最新封裝了一個表格合併和編輯外掛:vue-split-table,戳一戳
效果圖
圖片描述

element的2.x

(注意是2.X新加的方法)

1.span-method方法

可以實現合併行或列，

2.引數

方法的引數是一個物件，裡面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。

3.函式的返回陣列

該函式可以返回一個包含兩個元素的陣列，第一個元素代表rowspan，第二個元素代表colspan。也可以返回一個鍵名為rowspan和colspan的物件

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//判斷條件可以設定成你想合併的行的起始位置
          if (columnIndex === 0) {//判斷條件可以設定成你想合併的列的起始位置
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
         }
    }
 },

4.返回物件

return [1,2]也可以返回一個物件

return {
rowspan: 2,//實際上就是給td加上rowspan屬性
colspan: 1//實際上就是給td加上colspan屬性
};

5.貼上一個完整程式碼,可以直接拿去演示

<template>
  <div>
    <el-table
      :data="tableData6"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="數值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="數值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="數值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="數值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="數值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="數值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log(row,column)
        if (row.id=='12987122') {
          if (columnIndex === 0) {
            return [2, 2];
          } 
          else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

原生方法一(最簡單實現td單元格拆分)

1.原理分析

直接在對應的td裡面巢狀<table>的<tr>讓後臺對應返回一個陣列,遍歷即可實現單元格拆分

強烈推薦方法二,這個實現成本最低,也便新增核取方塊進行增刪改查

2.貼上一個demo

直接可以演示

<table class="ground-route-table">
    <thead>
      <tr>
        <td>城市</td>
        <td>美食</td>
        <td>好玩的地方</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>北京</td>
        <td>北京烤鴨</td>
        <td>
            <table  class="ground-route-table-small">
                <tr>故宮</tr>
                <tr>頤和園</tr>
                <tr>長城</tr>
            </table>
        </td>
      </tr>
    </tbody>
  </table>
  <style>
    .ground-route-table,
.ground-route-table-samll {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-collapse: collapse;
}
.ground-route-table td{
  border: 1px solid #dfe6ec;    
  }
  </style>

原生方法二

屬性colspan和rowspan實現合併行或列

1.原生的作用

可能有些專案是使用的element1.x版本,如果突然升級風險太高,我做這個就是,所以還是利用原生的table
的colspan和rowspan

2.實現難點

原生的難點在於table都是通過迴圈產生的,如果直接通過設定類設定樣式,這樣表格就會變亂,因為v-for下面每個td都建立了,所以要在v-for裡面進行判斷

3.那麼問題來了?

colspan和rowspan的資料是應該是動態的,那麼他們怎麼動態繫結呢,可能會想到操作DOM,
但是這不是最好的方法,我們可以通過自定義指令將屬性與值關聯起來

4.自定義指令

mergerows: {
    // 指令的定義
    inserted: function (el) {
      el.setAttribute('rowspan',3)
    }
  }

貼上詳解:https://cn.vuejs.org/v2/guide...

5.小插曲

很高興你還能看到這裡,有啥問題可以一起交流,如果覺得有點用,可以先收藏起來呢

6.貼上程式碼

    <template>
<table class="ground-route-table">
    <thead>
      <tr>
        <td>城市</td>
        <td>班次編碼</td>
        <td>車輛編碼</td>
        <td>順序</td>
        <td>裝車點</td>
        <td>到車點</td>
        <td>最晚到達時間</td>
        <td>發車時間</td>
        <td>到車時間</td>
        <td>OMP配載程式碼</td>
        <td>工作日</td>
        <td>線路型別</td>
        <td>線路型別</td>
        <td>資源型別</td>
        <td>車牌號</td>
        <td>司機ID</td>
        <td>司機姓名</td>
        <td>司機電話</td>
        <td>路線執行日期</td>
      </tr>
    </thead>

    <tbody>
      <tr v-for="(routeList,index) in groundRouteDataEnd" :key="index">
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8"><el-checkbox></el-checkbox></td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute1}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute2}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute3}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">{{routeList.groundRoute4}}</td>
        <td>{{routeList.groundRoute5}}</td>
        <td>{{routeList.groundRoute6}}</td>
        <td>{{routeList.groundRoute7}}</td>
        <td>{{routeList.groundRoute8}}</td>
        <td>{{routeList.groundRoute9}}</td>
        <td>{{routeList.groundRoute10}}</td>
        <td>{{routeList.groundRoute11}}</td>
        <td>{{routeList.groundRoute12}}</td>
        <td>{{routeList.groundRoute13}}</td>
        <td v-mergerows v-if="index!=1&&index!=2&&index!=4&&index!=5&&index!=7&&index!=8">
          <el-button type="primary" size="mini">檢視</el-button>
        </td>
      </tr>
    </tbody>
  </table>
    
</template>
<script>
export default {
  data() {
    return {
      groundRouteDataEnd: [
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "10",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        },
        {
          groundRoute1: "10",
          groundRoute2: "40",
          groundRoute3: "10",
          groundRoute4: "10",
          groundRoute5: "10",
          groundRoute6: "10",
          groundRoute7: "10",
          groundRoute8: "10",
          groundRoute9: "10",
          groundRoute10: "10",
          groundRoute11: "11"
        }
      ]
    };
  },
  directives: {
    mergerows: {
      // 指令的定義
      inserted: function(el) {
        el.setAttribute("rowspan", 3);
      }
    }
  }
};
</script>
  <style scoped>
.ground-route-table,
.ground-route-table-samll {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-collapse: collapse;
}
.ground-route-table td{
  border: 1px solid #dfe6ec;    
  }
</style>

表格實現標題合併程式碼例項
2017-02-10
Gridview表頭(跨行、跨列)顯示樣式!
2009-04-23
View
js實現table合併相同列單元格
2018-03-30
JS
VUE+Element UI實現簡單的表格行內編輯效果
2019-08-02
VueUI
jquery 動態表格合併
2017-05-18
jQuery
[Office] WPS Excel通過新增巨集實現多張表格合併
2018-03-06
Excel
vue表格合併單元格
2019-08-27
Vue
js 表格合併單元格
2018-06-07
JS
合併陣列
2020-04-04
陣列
javascript實現的合併兩個陣列程式碼例項
2017-03-26
JavaScript陣列
js合併相同內容表格行
2016-07-28
JS
FLEX合併陣列
2010-05-11
Flex陣列
EXCEL國地稅表格的合併技巧
2017-01-16
Excel
Git合併時遇到衝突或錯誤後取消合併
2020-10-22
Git
基於檔案的表合併及行轉列實現參考
2021-06-29
python中合併表格的兩種方法
2021-09-11
Python
vue+element將資料匯出成excel表格
2018-12-28
VueExcel
javascript實現物件直接量合併效果
2017-03-31
JavaScript物件
JS--陣列物件合併
2019-04-15
JS陣列物件
合併兩個有序陣列
2020-12-12
陣列
pandas 兩列資料合併
2020-11-18
Hive列合併與元素蒐集
2020-10-24
Hive
JavaScript concat()合併陣列
2017-04-13
JavaScript陣列
mysql-列合併成行方式
2013-06-25
MySql
mysql將多行資料合併或按組合並
2017-05-11
MySql
elementui表格動態資料單元格合併
2019-03-07
UI
elementui——表格的相同內容單元格合併
2021-07-10
UI
table表格單元格合併程式碼例項
2017-02-26
JS動態生成表格後合併單元格
2014-05-05
JS
Vue+Element 實現excel的匯入匯出
2020-08-13
VueExcel
excel合併單元格快捷鍵 excel多個表格內容合併到一起
2022-02-16
Excel
asp.net table表格表頭及列固定實現
2015-09-21
ASP.NET
命令列中的拆分與合併
2020-12-06
命令列
js如何合併兩個陣列
2017-03-21
JS陣列
88、合併兩個有序陣列
2018-07-07
陣列
演算法合併排序陣列
2014-05-04
演算法排序陣列
vue-split-table【表格合併和編輯外掛】
2018-10-26
Vue
table表格單元格橫向和屬性合併
2018-06-01