element-ui表格操作栏实现宽度自适应

前言

在开发实践中，Table组件作为展示数据的重要工具被广泛使用。当需要在表格中包含操作栏时，通常会利用 fixed="right" 属性将操作栏固定于表格右侧，以提升用户体验和界面整洁度。为了精确控制列的宽度，该组件提供了 width 和 min-width 两个参数。其中，width 参数用于设定列的固定宽度，适用于希望某一列始终保持特定宽度的情形；而 min-width 则确保了列至少具有的最小宽度，其独特之处在于，剩余的空间会被按比例分配给那些设置了 min-width 的列，从而使得布局更加灵活适应内容变化。

然而，在实际应用过程中，如果操作列中的按钮数量较多且根据具体情况动态显示时，仅依赖 min-width 来设置操作列宽度可能会导致大量空白区域出现的问题。如下图：

这种显示效果显然不符合高标准的用户体验要求。为解决这一问题，需采取更为合理的方案，即动态计算列宽，将该列的宽度设置为其内部最大元素宽度。

参考文章：blog.csdn.net/qq_42697268…

具体实现

首先，第一步需要为所有的按钮外层包裹一个 div 元素，并为其添加一个类名。在这里，我们使用类名 "operation"，以便后续通过 querySelectorAll 方法获取所有带有该类名的 DOM 元素。

第二步就是监听表格的数据，当数据发生变化时调用动态计算宽度的flexColumnWidth方法

下面就是flexColumnWidth函数，

 flexColumnWidth(length) {
      if (length > 0) {
        this.$nextTick(() => {
          const myTable = this.$refs.myTable;
          //查找出操作栏内带class为operation的dom元素
          const operations = [...myTable.$el.querySelectorAll(".operation")];
          let maxValue = 0;
          operations.forEach((item) => {
            if (item.offsetWidth > maxValue) {
              maxValue = item.offsetWidth;
            }
          });
          this.initWidth = maxValue + 20;
        });
      }
    }

遍历表格中每一行的操作栏，获取其内容的实际宽度，并将其中的最大值赋值给 el-column 的 width 属性。这里的 +20 是为了给操作栏留出一些额外的空间，避免内容显得过于紧凑。

实现效果图

通过上述方法，就实现了操作栏列宽的自适应调整，从而确保在不同内容情况下，操作栏的宽度都能动态适配，达到最佳的显示效果。