快捷導(dǎo)航

Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法

更新時(shí)間：2020年05月09日 16:43:46 作者：下一秒

這篇文章主要介紹了Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、分析需求

這里先上一張圖說明需求：

根據(jù)后端返回的數(shù)據(jù) （ res 是一個(gè)數(shù)組，它的元素是一個(gè)對象，對象里面的 ext 屬性是一個(gè)對象，它又包含了， default 、 free 和 pay 三個(gè)屬性，且這三個(gè)都是數(shù)組格式。）：

渲染出一個(gè)這樣子的 表格 ：

res 數(shù)據(jù)：

res 的每一個(gè)元素的直接屬性 name （即為郵費(fèi)模板名稱，比如成都運(yùn)費(fèi)模板），

res 的 ext 屬性下的三個(gè)數(shù)組 default 、 free 、 pay ，每一個(gè)數(shù)組要大的一行（這一行中，第一列是運(yùn)送到的地址的名字，這里定義的是 area 屬性，但后端是未給到這個(gè)字段的，可自己處理數(shù)據(jù)添加該字段，這里就不細(xì)說了。）這個(gè) area 屬性占據(jù)的這一列，在頁面的展示效果應(yīng)該是多行合并的效果。

二、代碼實(shí)現(xiàn)：

<template>
 <div class="layout">
  <el-table :data="res" >
  <el-table-column prop="name">
   <template slot-scope="scope">
   <div class="tab_header">
    <span style="font-weight:600;">{{scope.row.name}}</span>
    <div class="operate">
    <span @click="handleEdit(scope.$index, scope.row)">修改</span>
    <span @click="handleDelete(scope.$index, scope.row)">刪除</span>
    </div>
   </div>

   <!-- 這里要實(shí)現(xiàn) 多個(gè)表格共用一個(gè)表頭，故需做判斷，當(dāng)表格要渲染的數(shù)據(jù)為default這個(gè)數(shù)組的時(shí)候，才顯示表頭的label值 -->
   <!-- 注意：當(dāng)label無值的時(shí)候，還是會(huì)占用空間，故當(dāng)前表格在頁面上會(huì)出現(xiàn)一個(gè)代表表頭的空行，需要手動(dòng)更改（重寫）Element表格的 thead樣式 -->

   <div v-for="item in (scope.row.ext)" :key="item.id">
    <el-table :data="item" border :class="item!==scope.row.ext.default?'tab-thead-style':''" style="box-sizing: border-box;border-top:none;" :span-method="objectSpanMethod">
    <el-table-column :label="item===scope.row.ext.default?'運(yùn)送到':''" prop="area"></el-table-column>
    <el-table-column :label="item===scope.row.ext.default?'首重':''" prop="weight"></el-table-column>
    <el-table-column :label="item===scope.row.ext.default?'運(yùn)費(fèi)':''" prop="first_price"></el-table-column>
    <el-table-column :label="item===scope.row.ext.default?'續(xù)重':''" prop="weight_incre"></el-table-column>
    <el-table-column :label="item===scope.row.ext.default?'最終運(yùn)費(fèi)':''" prop="extend_price"></el-table-column>
    </el-table>
   </div>

   </template>
  </el-table-column>
  </el-table>
 </div>
</template>
<script>
export default {
 data () {
 return {
  // res 參考的是后端返回的數(shù)據(jù)格式，
  res: [
  {
   id: 1,
   dealer_id: 0,
   name: '成都運(yùn)費(fèi)模板',
   type: 1,
   ext: {
   default: [{ area: '默認(rèn)', type: 1, region: '1', weight: '首重d', weight_incre: '續(xù)重d', first_price: '運(yùn)費(fèi)d', extend_price: '最終運(yùn)費(fèi)d' }],
   free: [{ area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '續(xù)重f', first_price: '運(yùn)費(fèi)f', extend_price: '最終運(yùn)費(fèi)f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '續(xù)重f', first_price: '運(yùn)費(fèi)f', extend_price: '最終運(yùn)費(fèi)f' }],
   pay: [{ area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }]
   }
  },
  {
   id: 2,
   dealer_id: 0,
   name: '重慶運(yùn)費(fèi)模板',
   type: 2,
   ext: {
   default: [{ area: '默認(rèn)1', type: 1, region: '1', weight: '首重d', weight_incre: '續(xù)重d', first_price: '運(yùn)費(fèi)d', extend_price: '最終運(yùn)費(fèi)d' }],
   free: [{ area: 'free1', type: 1, region: '1', weight: '首重f', weight_incre: '續(xù)重f', first_price: '運(yùn)費(fèi)f', extend_price: '最終運(yùn)費(fèi)f' }, { area: 'free', type: 1, region: '1', weight: '首重f', weight_incre: '續(xù)重f', first_price: '運(yùn)費(fèi)f', extend_price: '最終運(yùn)費(fèi)f' }],
   pay: [{ area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay1', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }, { area: 'pay', type: 1, region: '1', weight: '首重p', weight_incre: '續(xù)重p', first_price: '運(yùn)費(fèi)p', extend_price: '最終運(yùn)費(fèi)p' }]
   }
  }

  ]
 }
 },
 methods: {
 handleEdit (index, row) {
  console.log(index, row)
 },
 handleDelete (index, row) {
  console.log(index, row)
 },
 objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
  if (rowIndex === 0) {
   let maxLen
   this.res.forEach(val => {
   const arr = [val.ext.default.length, val.ext.free.length, val.ext.pay.length]
   arr.sort((a, b) => a - b)// arr數(shù)組 按數(shù)字大小從小到大排序
   maxLen = arr.pop()// 取出排序后的數(shù)組arr中的最后一個(gè)元素
   })
   return {
   // 這個(gè)rowspan應(yīng)該據(jù) ext的default,pay,free的長度不同來定，取最大長度
   rowspan: maxLen,
   colspan: 1
   }
  } else {
   return {
   rowspan: 0,
   colspan: 0
   }
  }
  }
 }
 }
}
</script>
<style lang="scss">
.layout{

 .tab_header{
 color:#333;
 padding:0 5px 0 5px;
 height:45px;
 line-height:45px;
 border:1px solid #eee;display:flex;
 justify-content: space-between;
 background:rgb(233, 225, 225);
 }
 .operate{
 span{
  font-size: 14px;
  margin-right: 20px;
  margin-right:20px;
  color:#409EFF;
  cursor: pointer;
 }
 }
 /* 處理多個(gè)表格共用一個(gè)表頭時(shí)，表頭處出現(xiàn)多余空行的問題 （label置空后還是占據(jù)空間問題） */
 .tab-thead-style{
  thead{
   display: none;
  }
 }

}
</style>

三、知識(shí)點(diǎn)總結(jié)：

為什么要采用這種方式解決（渲染）？
① . 項(xiàng)目用的UI組件是Element，它的Table表格組件，沒有直接處理行的操作。
② . el-table，它是通過注入data對象數(shù)組，并在el-table-column 中用prop屬性來對應(yīng)對象中的鍵名來填入數(shù)據(jù)，從而渲染出渲染表格。其中el-table-column表示一個(gè)列，label屬性來定義表格的列名，即對象的一個(gè)鍵名代表一列；
③ . 沒想到更優(yōu)的解決辦法，O(∩_∩)O哈哈~

多個(gè)表格共用一個(gè)表頭時(shí)，注意：
①. 需做判斷，同時(shí)注意label的值。
②. 當(dāng)el-table-column 的屬性label無值的時(shí)候，還是會(huì)占用空間，故當(dāng)前表格在頁面上會(huì)出現(xiàn)一個(gè)代表表頭的空行，需要手動(dòng)更改（重寫）Element表格的 thead樣式

table表格嵌套的時(shí)候，注意：
① . Element的Table組件可自定義列模板，主要是利用它實(shí)現(xiàn)表格嵌套部分，通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)，更多用法參考官網(wǎng)。
②. Element的Table組件可合并行或列，多行或多列共用一個(gè)數(shù)據(jù)時(shí)，可以合并行或列；通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，參考上述代碼的 **objectSpanMethod**方法（該表格的第一列需要合并多行——合并渲染表格的data數(shù)組的長度那么多行）或者官網(wǎng)。

到此這篇關(guān)于Element實(shí)現(xiàn)表格嵌套、多個(gè)表格共用一個(gè)表頭的方法的文章就介紹到這了,更多相關(guān)Element 表格嵌套內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: