详解el-table表头文字换行的三种方式

目录
  • 问题描述
  • 效果图
  • 三种方式的代码
  • 总结

问题描述

表格中的表头一般都是不换行的,不过有时候在某些业务场景中,需要让表头的文字换行展示一下,我们先看一下效果图

效果图

三种方式的代码

看注释就行啦。
演示的话,直接复制粘贴运行就行啦

<template>
  <div class="vueWrap">
    <el-table
      style="width: 900px"
      :data="tableBody"
      border
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '14px',
      }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="58"
        align="center"
      ></el-table-column>

      <!-- 表头换行方式一,使用头部插槽方式,将表头文字拆分在两个div中,因为div盒子是块元素
           所以两个div会换行,所以表头就换行了,此方式适用于固定数据的表头换行 -->
      <el-table-column prop="toolName" width="180" align="center">
        <template slot="header">
          <div>工具箱</div>
          <div>零件名称</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.toolName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="供应商" prop="supplier" width="120" align="center">
      </el-table-column>

      <!-- 表头换行方式二,较之于方式一,这种方式是/n换行符,加css的white-space空白样式控制-->
      <el-table-column
        :label="labelFn()"
        prop="supplierCountry"
        width="180"
        align="center"
      >
      </el-table-column>

      <!-- 表头换行方式三,动态方式 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :label="item.labelName"
        :prop="item.propName"
        width="180"
        align="center"
        :render-header="renderheader"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 动态数据表头就需要让后端返回来了,让其在需要换行的地方用逗号分隔开
      tableHeader: [
        {
          labelName: "型号001,价格(元)",
          propName: "typeOne",
        },
        {
          labelName: "型号002,价格(元)",
          propName: "typeTwo",
        },
      ],
      // 表体数据
      tableBody: [
        {
          id: "2021111101",
          toolName: "5G服务",
          supplier: "华为",
          supplierCountry: "中国",
          typeOne: "8888888",
          typeTwo: "9999999",
        },
        {
          id: "2021111101",
          toolName: "6G-SERVER",
          supplier: "中华有为",
          supplierCountry: "CHINA",
          typeOne: "678678678",
          typeTwo: "789789789",
        },
      ],
    };
  },
  methods: {
    labelFn() {
      // 在需要换行的地方加入换行符 \n  ,在搭配最底下的white-space样式设置
      return `供应商\n所属国家`;
    },

    // 饿了么UI的表头函数渲染方式,这种方式和表头插槽方式有点类似
    // 也是把表头的数据文字分割成两块,然后将内容渲染到两个div中(div自动换行)
    renderheader(h, { column, $index }) {
      return h("div", {}, [
        h("div", {}, column.label.split(",")[0]),
        h("div", {}, column.label.split(",")[1]),
      ]);
    },

  },
};
</script>
<style lang="less" scoped>
/deep/ .el-table th.el-table__cell > .cell {
  white-space: pre;
  // white-space: pre-wrap; // 也行。

}
</style>

关于white-space不赘述,详情查询官方文档 developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

总结

三种方式各有特色,但是render-header会略为耗费一点点性能。
若为固定表头数据,则优先推荐使用表头插槽方式,其次推荐换行符加css方式。
若为动态数据,则只能使用表头renderheader函数了

到此这篇关于el-table表头文字换行的三种方式的文章就介绍到这了,更多相关el-table表头文字换行的三种方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too

  • el-table表头根据内容自适应完美解决表头错位和固定列错位

    将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 <el-table v-tableFit></el-table>) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间越长. 尽量使用v-if,不然有些情况下会计算错误. Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用. componentUp

  • vue el-table实现自定义表头

    本文实例为大家分享了vue el-table实现自定义表头的具体代码,供大家参考,具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头. 文档说明如下: 代码实现: <template> <el-dialog width="50%" :visible.sync="isShow" :before-close="beforeClose" title="自定义设备类型属性">

  • 详解el-table表头文字换行的三种方式

    目录 问题描述 效果图 三种方式的代码 总结 问题描述 表格中的表头一般都是不换行的,不过有时候在某些业务场景中,需要让表头的文字换行展示一下,我们先看一下效果图 效果图 三种方式的代码 看注释就行啦. 演示的话,直接复制粘贴运行就行啦 <template> <div class="vueWrap"> <el-table style="width: 900px" :data="tableBody" border :h

  • 详解Spring Boot 访问Redis的三种方式

    目录 前言 开始准备 RedisTemplate JPA Repository Cache 总结 前言 最近在极客时间上面学习丁雪丰老师的<玩转 Spring 全家桶>,其中讲到访问Redis的方式,我专门把他们抽出来,在一起对比下,体验一下三种方式开发上面的不同, 分别是这三种方式 RedisTemplate JPA Repository Cache 开始准备 开始之前我们需要有Redis安装,我们采用本机Docker运行Redis, 主要命令如下 docker pull redis doc

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

  • 详解Nginx 虚拟主机配置的三种方式(基于IP)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置 如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1

  • 详解Nginx 虚拟主机配置的三种方式(基于端口)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于IP) https://www.jb51.net/article/14974.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 2.Nginx基于端口的虚拟主机配置 如一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配

  • 详解Golang开启http服务的三种方式

    前言 都说go标准库实用,Api设计简洁.这次就用go 标准库中的net/http包实现一个简洁的http web服务器,包括三种版本. v1最简单版 直接使用http.HandleFunc(partern,function(http.ResponseWriter,*http.Request){}) HandleFunc接受两个参数,第一个为路由地址,第二个为处理方法. //v1 func main() { http.HandleFunc("/", func(w http.Respon

  • 详解使用scrapy进行模拟登陆三种方式

    scrapy有三种方法模拟登陆方式: - 直接携带cookies - 找url地址,发送post请求存储cookie - 找到对应的form表单,自动解析input标签,自动解析post请求的url地址,自动带上数据,自动发送请求 1.携带cookies登陆github import scrapy import re class Login1Spider(scrapy.Spider): name = 'login1' allowed_domains = ['github.com'] start_

  • 详解Redis实现限流的三种方式

    面对越来越多的高并发场景,限流显示的尤为重要. 当然,限流有许多种实现的方式,Redis具有很强大的功能,我用Redis实践了三种的实现方式,可以较为简单的实现其方式.Redis不仅仅是可以做限流,还可以做数据统计,附近的人等功能,这些可能会后续写到. 第一种:基于Redis的setnx的操作 我们在使用Redis的分布式锁的时候,大家都知道是依靠了setnx的指令,在CAS(Compare and swap)的操作的时候,同时给指定的key设置了过期实践(expire),我们在限流的主要目的就

  • 详解Redis集群搭建的三种方式

    一.单节点实例 单节点实例还是比较简单的,平时做个测试,写个小程序如果需要用到缓存的话,启动一个 Redis 还是很轻松的,做为一个 key/value 数据库也是可以胜任的 二.主从模式(master/slaver) redis 主从模式配置 主从模式: redis 的主从模式,使用异步复制,slave 节点异步从 master 节点复制数据,master 节点提供读写服务,slave 节点只提供读服务(这个是默认配置,可以通过修改配置文件 slave-read-only 控制).master

  • 详解SpringBoot静态方法获取bean的三种方式

    目录 方式一  注解@PostConstruct 方式二  启动类ApplicationContext 方式三 手动注入ApplicationContext 方式一  注解@PostConstruct import com.example.javautilsproject.service.AutoMethodDemoService; import org.springframework.beans.factory.annotation.Autowired; import org.springfr

随机推荐