前端开发之el-table 表头不换行且宽度自适应

冯浩(grow up)2023-09-20 7:07

element的table中动态添加表头并设置表头不换行

前言

本次讲解的是elemen和element-plus来通过table的标签render-header来实现的

效果图

element中使用

代码

javascript 复制代码 
<template>
    <div>
        <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column v-for="col of columns" :key="col.prop"
                :prop="col.prop" :label="col.label" 
                align="center" header-align="center" 
                show-overflow-tooltip 
                :render-header="renderHeader"></el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            columns: [
                {
                    label: '日期',
                    prop: 'date'
                },
                 {
                    label: '姓名',
                    prop: 'name'
                },
                 {
                    label: '省份',
                    prop: 'province'
                },
                 {
                    label: '市区',
                    prop: 'city'
                },
                 {
                    label: '地址',
                    prop: 'address'
                },
                 {
                    label: '邮编',
                    prop: 'zip'
                },
                 {
                    label: '这是测试字段01',
                    prop: 'test01'
                },
                 {
                    label: '这是测试字段02',
                    prop: 'test02'
                },
                 {
                    label: '这是测试字段03',
                    prop: 'test03'
                },
                 {
                    label: '这是测试字段04',
                    prop: 'test04'
                }
            ],
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
                    test02: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
                    test03: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
                    test04: '这是一条测试数据.这是一条测试数据.这是一条测试数据.'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    test01: '测试',
                    test02: '测试',
                    test03: '测试',
                    test04: '测试'
                }
            ]
        }
    },
    methods: {
        // 表头部重新渲染
		renderHeader(h, { column, $index }) {
			// 新建一个 span
			let span = document.createElement('span');
			// 设置表头名称
			span.innerText = column.label;
			// 临时插入 document
			document.body.appendChild(span);
			// 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
			column.minWidth = span.getBoundingClientRect().width + 20;
			// 移除 document 中临时的 span
			document.body.removeChild(span);
			return h('span', column.label);
		}
    }
}
</script>

element-plus中使用:没有了h

代码

javascript 复制代码 
<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="250">
      <el-table-column v-for="col of columns" :key="col.prop" :prop="col.prop" :label="col.label" :render-header="renderHeader" align="center" header-align="center" show-overflow-tooltip >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'trendsTableHeader',
  data () {
    return {
      columns: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '省份',
          prop: 'province'
        },
        {
          label: '市区',
          prop: 'city'
        },
        {
          label: '地址',
          prop: 'address'
        },
        {
          label: '邮编',
          prop: 'zip'
        },
        {
          label: '这是测试字段01',
          prop: 'test01'
        },
        {
          label: '这是测试字段02',
          prop: 'test02'
        },
        {
          label: '这是测试字段03',
          prop: 'test03'
        },
        {
          label: '这是测试字段04',
          prop: 'test04'
        }
      ],
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
          test02: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
          test03: '这是一条测试数据.这是一条测试数据.这是一条测试数据.',
          test04: '这是一条测试数据.这是一条测试数据.这是一条测试数据.'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test01: '测试',
          test02: '测试',
          test03: '测试',
          test04: '测试'
        }
      ]
    }
  },
  methods: {
    // 表头部重新渲染
    renderHeader ({ column, $index }) {
      // 新建一个 span
      const span = document.createElement('span')
      // 设置表头名称
      span.innerText = column.label
      // 临时插入 document
      document.body.appendChild(span)
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 20
      // 移除 document 中临时的 span
      document.body.removeChild(span)
      return column.label
    }
  }
}
</script>
相关推荐
灵感__idea1 天前
Hello 算法：让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡1 天前
CSS是什么？—— 网页的“化妆师”
前端·css
黑犬mo1 天前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel1 天前
🧩 Vue 3 watch 源码详解（含完整注释）
前端·javascript·vue.js
大前端helloworld1 天前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel1 天前
🌿 一文看懂 Vue 3 的 watch 源码：从原理到流程
前端
繁依Fanyi1 天前
让工具说话：我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904271 天前
C# 中的回调函数
java·前端·c#
kura_tsuki1 天前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo1 天前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端
热门推荐
01BongoCat - 跨平台键盘猫动画工具02两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答03GitHub 镜像站点04智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践052025羊城杯网络安全大赛 wp06UV安装并设置国内源07Linux下V2Ray安装配置指南08Cursor Plan Mode：AI 终于知道先想后做了09Spring Boot 实现微信登录，So Easy !1046个Nano-banana 精选提示词，持续更新中