ElementUI中el-table表格操作列实现宽度自适应

原创已于 2025-03-27 10:08:57 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2025-03-27 10:02:33 首次发布

1.表格中操作列部分代码：

                    <el-table-column fixed="right"
                                     label="操作"
                                     :render-header="renderHeader"
                    >
                        <template #default="scope">
                            <div class="undertake-btns">
                                <el-button v-if="true"
                                           type="text"
                                           size="small"
                                           @click="viewClick(scope.row)"
                                >
                                    查看
                                </el-button>
                                ...
                            </div>
                        </template>
                    </el-table-column>

2.js中部分代码：

  methods: {
    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // 获取操作按钮组的元素
      const opts = document.getElementsByClassName('undertake-btns');
      const widthArr = [];

      // 遍历每个按钮容器，计算其实际宽度并动态设置样式
      Array.prototype.forEach.call(opts, function (item, index) {
        if (item.innerText) {
          // 强制重新布局以获取准确的宽度
          item.style.display = 'inline-block';
          item.style.whiteSpace = 'nowrap';
          widthArr.push(item.offsetWidth);

          // 恢复原来的样式
          item.style.display = '';
          item.style.whiteSpace = '';

          // 设置其他样式...
          ...
        }
      });

      // 重新设置列标题及宽度属性
      if (widthArr.length > 0) {
        column.width = Math.max(...widthArr) + 22;
      } else {
        column.width = 100; // 没有按钮时设置固定宽度为 100px
      }

      // 返回列标题内容
      return h('span', column.label);
    },

    // 查看点击
    viewClick(row) {
      ......
    },

}

3.css样式：

/* 设置操作列按钮样式 */
.undertake-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}