隐藏table一列，别再一味地用el-table-column的show-overflow-tooltip

2024-01-08 14:29:13

避免使用 el-table-column 的 show-overflow-tooltip

在使用 el-table 组件时，很多人可能会遇到需要隐藏某一列的情况。这时，一种常见的做法是使用 el-table-column 的 show-overflow-tooltip 属性来实现列的隐藏。

<el-table-column
  prop="name"
  label="姓名"
  show-overflow-tooltip
/>

这种方法虽然简单，但它有一些缺点：

它会在列头显示一个工具提示，提示用户可以点击隐藏该列。
它只能隐藏最后一列。
它不能在列被隐藏后将其恢复显示。

使用 `v-if` 实现列的隐藏

为了克服上述缺点，我们可以使用 v-if 指令来实现列的隐藏。

<el-table-column
  v-if="showNameColumn"
  prop="name"
  label="姓名"
/>

data() {
  return {
    showNameColumn: true,
  }
}

这种方法的好处是：

它不会在列头显示工具提示。
它可以隐藏任何列。
它可以恢复隐藏的列。

使用自定义指令实现列的隐藏

如果需要对列的隐藏行为进行更多的控制，比如隐藏多列、设置隐藏的延迟等，可以使用自定义指令来实现。

<el-table-column
  v-column-hide
/>

Vue.directive('column-hide', {
  bind(el, binding) {
    // 获取列头元素
    const header = el.querySelector('.el-table_header-column');

    // 添加隐藏按钮
    const button = document.createElement('button');
    button.innerHTML = '隐藏';
    button.addEventListener('click', () => {
      // 隐藏列
      el.style.display = 'none';
    });

    // 将隐藏按钮添加到列头
    header.appendChild(button);
  },
});