前端vue用el-table如何实现表头内容过长换行处理,实现换行效果

前端vue用el-table如何实现表头内容过长换行处理,实现换行效果

这是效果图

有两种方法,一种简易版本,一种万能方法,都是el-table,先看文档

表头标题是可以自定义的

方法一

label的解释写在代码里面了,这里会自动形成换行,主要是因为v-html的原因

运用场景,有些人的需求简单只需要换行,并且是封装的组件,最重要是不想花时间

html 复制代码
<el-table ref="myTable" border>
	<el-table-column prop="address" label="可写可不写了">
		<template #header>
           <div v-html="label的值" />
        </template>
    </el-table-column>
</el-table>
// label值是什么样子的呢!  就是'我是第一行<br>我是第二行'

方法二

这个很简单 直接用标签换行即可

html 复制代码
<el-table ref="myTable" border>
	<el-table-column prop="address" label="可写可不写了">
		<template #header>
           <div>我是第一行</div>
           <div>我是第二行</div>
        </template>
    </el-table-column>
</el-table>

方法三

将方法一和方法二封装起来

html 复制代码
<el-table ref="myTable" border>
	<el-table-column v-for="(item, index) in List" :key="item.id" :prop="item.prop" :label="item.label">
       <template #header>
          <slot v-if="item.soltHeader" :name="item.soltHeader" />
          <div v-else v-html="item.label" />
       </template>
    </el-table-column>
</el-table>

如果有用,请给我点赞收藏,我会很开心,谢谢

相关推荐
ziyue757530 分钟前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰1 小时前
HTML语义化:当网页会说话
前端·html
冰万森1 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr1 小时前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学1 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空2 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞2 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺2 小时前
CommonJS
前端·面试