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隐藏列的多种应用方式，从而完成表格样式的定制和功能的优化。