前端开发之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>
相关推荐
此乃大忽悠3 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800912 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家15 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架