EL-Table隱藏列的多種應用方式

一、EL-Table列的v-show屬性展示與隱藏

EL-Table組件允許通過v-show屬性來控制某列的顯隱狀態，在某些特定需求場景下使用該屬性可以完成很多自定義的功能。例如，我們需要在EL-Table中展示一份學生信息表格，其中有一列是學生成績，而這個成績可能不是每個人都有，那麼我們就可以通過v-show只顯示擁有成績的學生成績列，隱藏沒有成績數據的列。下面是示例代碼：

<el-table-column label="成績" prop="score" v-show="showScore"></el-table-column>

其中，showScore是一個布爾型變量，用於控制該列是否顯示

二、EL-Table隱藏表頭

在某些情況下，我們需要在EL-Table中隱藏某一列的表頭，例如我們在完成一個統計表格時，不需要某些列的表頭，只需要展示內容即可，此時可以使用EL-Table的show-header屬性來控制表頭的顯隱狀態，如以下代碼：

<el-table-column label="學號" prop="id" :show-header="false"></el-table-column>

可以看到，通過show-header屬性的設置，可以隱藏表頭

三、使用Element UI隱藏列組件

Element UI提供了一個column-chooser組件，該組件可以讓用戶自定義選擇要顯示的列，用戶可以通過checkbox組件來勾選對應的列名，來過濾掉不要顯示的列。下面是簡單的實現方式：

<template>
  <el-table
  // ...
  :column-controller="true">
    <el-table-column
    // ...
    :order="1"
    label="序號"></el-table-column>
    <el-table-column
    label="姓名"
    prop="name"></el-table-column>
    <el-table-column
    label="性別"
    prop="sex"></el-table-column>
    <el-table-column
    label="電話"
    prop="phone"></el-table-column>
    <el-table-column
    label="地區"
    prop="location"></el-table-column>
    <el-table-column
    label="操作"
    prop="action"></el-table-column>
    <column-chooser></column-chooser>
  </el-table>
</template>

通過使用column-chooser組件，我們將EL-Table的列管理功能交給了用戶，可以實現一定程度的隱藏列 asp。需要注意的是，該功能需要引入Element UI的column-chooser組件庫。

四、EL-Table合併列

在一些特定場景下，我們可能需要將EL-Table中的相鄰多列合併成一列，以達到更好的顯示效果。例如，在展示一組成員信息時，可能需要將「姓名」和「手機號」這兩個相鄰的列合併成一個新的列「聯繫方式」。我們可以通過EL-Table的slot-scope屬性實現列合併功能。下面是示例代碼：

<el-table-column label="聯繫方式"  :span-method="handleSpanMethod">
    <template scope="scope">
        <span v-if="scope.row.show">{{ scope.row.tel }}</span>
    </template>
</el-table-column>

以上代碼中，關鍵是span-method屬性，如果span-method函數返回一個數組，那麼代表需要將當前列合併到前一個元素中，如果返回一個對象，則代表合併到一個指定的行，具體代碼如下：

handleSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (row.show) {
      return {
        rowspan: row['span'],
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  } else if (columnIndex === 1) {
    if (row.show) {
      return {
        rowspan: row['span'],
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

五、EL-Table隱藏豎滾動條

在某一列元素較多的情況下，EL-Table會出現豎直滾動條，如果需求不顯示滾動條，可以通過設置Table的show-scrollbar屬性實現。代碼如下：

<el-table :data="tableData" :show-scrollbar="false"></el-table>

六、EL-Table列寬的調整

在日常的開發工作中，我們經常需要針對每一列的數據來調整該列的寬度，讓數據的展示更合理。這個時候EL-Table提供了多種方法來控制列的寬度大小，例如通過設置列的min-width或者width屬性來精確控制列的寬度。代碼如下：

<el-table-column
label="手機"
prop="phone"
:width="150"></el-table-column>

可以看到，在上面的示例代碼中，我們設置了EL-Table中「手機」列的寬度為「150」，從而達到了我們期望的效果。

七、EL-Table超長隱藏

在實際的生產過程中，我們經常需要將不合法或者敏感的信息進行超長隱藏。在EL-Table中，我們可以通過CSS、slot和watch屬性來實現。代碼如下：

<style>
.el-table__body td .hide-text {
  max-width: 0;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
</style>

<el-table-column label="名稱">
    <template scope="scope">
      <div :class="{'hide-text': scope.row.isHide}">
        {{ scope.row.name }}
      </div>
    </template>
</el-table-column>

以上代碼中，我們使用了樣式表將超長內容隱藏，並且在el-table-column中使用了template標籤來定義行數據，通過watch屬性來判斷是否需要隱藏數據。

八、EL-Table列排序

在某些情況下，我們需要針對某一列進行排序，讓表格數據更有序。在EL-Table中，我們可以通過給列綁定sortable屬性來設置可排序的列。代碼如下：

<el-table-column
  prop="date"
  label="事件"
  sortable="custom"
  :sort-method="customSort"></el-table-column>

以上代碼中，我們使用sortable屬性來啟用該列的排序功能，並且通過sort-method屬性來配置自定義的排序方式customSort。

九、EL-Table固定列錯位

在EL-Table中，如果我們需要固定表頭，需要給EL-Table設置屬性use-fixed-header，同時我們也可以使用fixed-columns屬性來指定固定列的個數。如果我們使用錯位的方式來固定表頭，需要使用max-height來控制固定列的顯示高度，從而實現錯位效果。代碼如下：

<el-table
  :data="tableData"
  :height="400"
  :max-height="300"
  :use-fixed-header="true">
  <el-table-column
    fixed
    prop="date"
    label="日期"></el-table-column>
  <el-table-column
    fixed
    prop="name"
    label="姓名"></el-table-column>
  <el-table-column
    prop="address"
    label="地址"></el-table-column>
</el-table>

十、EL-Table拖拽列選取

在一些特殊情況下，我們希望用戶可以通過拖拽列選取的方式來選擇對應的數據行，EL-Table提供了一些自定義的拖拽事件，可以實現這一需求。

首先，我們需要引入column-draggable.js 文件。

import '@/utils/column-draggable.js';    

需要注意的是，column-draggable.js的代碼需要放置在EL-Table的代碼後面

其次，在EL-Table的mounted方法中註冊drag-handle回調函數：

mounted() {
  let dragHandlers= document.getElementsByClassName('drag-handle');
  let len = dragHandlers.length
  for (let i = 0; i < len; i++) {
    dragHandlers[i].addEventListener('mousedown', this.handleDragStart, false)
    dragHandlers[i].addEventListener('touchstart', this.handleDragStart, false)
  }
}

最後，實現handleDragStart方法實現功能，如下面示例代碼：

handleDragStart(e) {
  // 鼠標左鍵，如果是document，比如el-dialog，去掉
  if (e.button !== 0 || (e.target.tagName === 'INPUT' && e.type === 'mousedown' && !e.target.checked) || !this.$el.contains(e.target)) return
  
  const dragState = {
    el: e.currentTarget.parentNode,
    rect: e.currentTarget.parentNode.getBoundingClientRect(),
    startX: e.clientX || e.touches[0].pageX,
    column: null,
  }
  
  if (dragState.el.classList.contains('is-leaf')) {
    dragState.column = dragState.el
  } else {
    dragState.column = dragState.el.querySelector('.is-leaf')
  }
}

至此，我們可以實現列拖拽選擇功能。

總結

通過以上幾種方式，我們可以實現EL-Table隱藏列的多種應用方式，從而完成表格樣式的定製和功能的優化。