<el-table> 表头的字数多于5时,表头单元格的字符串的行、列数按近似黄金分割比例 (√5 - 1)/2 排列

以下是基于Element UI的<el-table>组件的实现方式:

  1. 在<el-table-column>中添加自定义的表头模板,并给表头模板绑定一个ref。
html 复制代码
<el-table-column prop="name">
  <template slot="header">
    <div ref="tableHeader" class="custom-header">
      {{ $column.label }}
    </div>
  </template>
</el-table-column>
  1. 在 mounted 钩子中获取表头单元格的行、列数,并根据黄金分割比例进行排列。
js 复制代码
mounted() {
  this.$nextTick(() => {
    const tableHeader = this.$refs.tableHeader;
    const headerWidth = tableHeader.offsetWidth;
    const headerHeight = tableHeader.offsetHeight;

    // 黄金分割比例
    const ratio = (Math.sqrt(5) - 1) / 2;

    // 计算行数和列数
    const rowCount = Math.ceil(1 / ratio);
    const colCount = Math.ceil(ratio);

    // 计算每个单元格的宽度和高度
    const cellWidth = headerWidth / colCount;
    const cellHeight = headerHeight / rowCount;

    // 将单元格位置设置为绝对定位
    tableHeader.style.position = 'relative';

    // 遍历每个单元格并设置它的位置
    let row = 0;
    let col = 0;
    Array.from(tableHeader.childNodes).forEach((cell) => {
      cell.style.position = 'absolute';
      cell.style.left = `${col * cellWidth}px`;
      cell.style.top = `${row * cellHeight}px`;
      col++;
      if (col === colCount) {
        col = 0;
        row++;
      }
    });
  });
}

完整的代码示例可以参考以下代码片段:

html 复制代码
<template>
  <el-table :data="tableData">
    <el-table-column prop="name">
      <template slot="header">
        <div ref="tableHeader" class="custom-header">
          {{ $column.label }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="gender" label="Gender"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John Doe', age: 30, gender: 'Male' },
        { name: 'Jane Doe', age: 25, gender: 'Female' },
        { name: 'Bob Smith', age: 40, gender: 'Male' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const tableHeader = this.$refs.tableHeader;
      const headerWidth = tableHeader.offsetWidth;
      const headerHeight = tableHeader.offsetHeight;

      // 黄金分割比例
      const ratio = (Math.sqrt(5) - 1) / 2;

      // 计算行数和列数
      const rowCount = Math.ceil(1 / ratio);
      const colCount = Math.ceil(ratio);

      // 计算每个单元格的宽度和高度
      const cellWidth = headerWidth / colCount;
      const cellHeight = headerHeight / rowCount;

      // 将单元格位置设置为绝对定位
      tableHeader.style.position = 'relative';

      // 遍历每个单元格并设置它的位置
      let row = 0;
      let col = 0;
      Array.from(tableHeader.childNodes).forEach((cell) => {
        cell.style.position = 'absolute';
        cell.style.left = `${col * cellWidth}px`;
        cell.style.top = `${row * cellHeight}px`;
        col++;
        if (col === colCount) {
          col = 0;
          row++;
        }
      });
    });
  },
};
</script>

<style scoped>
.custom-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}
</style>
相关推荐
大怪v2 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机4 小时前
Promise 常见面试题(持续更新中)
前端·javascript
nueroamazing5 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
WebDesign_Mu6 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了6 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎6 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端7 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
LuckySusu8 小时前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js