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

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>
相关推荐
然我5 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子10 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹13 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器20 分钟前
指定阿里镜像原理
前端
枷锁—sha24 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha26 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜42 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux