elementUI的表头重写

以你之姓@ 2022-10-05 09:56 237阅读 0赞

先看效果：

![20210608152024799.png][]

表头单元格：

<el-table-column
                  v-if="item.renderHeader"
                  :key="index"
                  :min-width="item.width"
                  :prop="item.field"
                  :label="item.label"
                  :show-overflow-tooltip="true"
                  :render-header="renderHeader"
                ></el-table-column>

item.renderHeader 用于判断当前表格列的表头是否重写；

renderHeader()  渲染函数；

renderHeader(h,{column}) {
          let renderLimt = this.config.renderLimt;
          return h("div", {}, [ // //h是creatElement定义的函数，三个参数，一是标签名，二是属性设置，三是值
            h('span', {}, column.label), // 第一个元素：文字
            h(
              "el-popover", // 第二个元素的弹出框，鼠标悬浮到icon图标上
              {
                props: {
                  placement: "top",
                  width: "200",
                  trigger: "hover",
                  content: tooltip[column.property + renderLimt],
                },
              },
              [
                h("i",{  // 第二个元素：一个icon;
                    slot: "reference",
                    class: "el-icon-info",
                    style:'color:#47BFB3;margin-left:5px;cursor:pointer;'
                  },
                  ""
                )
              ]
            ),
          ]);
        },

tooltip 需要引入自己写的一个js文件，需要在页面中引入；文件内容：

const tooltip = { 
      classTimes_student: "仅可查看2019年12月17日之后的退费课时明细数据。"
    }
    
    export { tooltip }

[20210608152024799.png]: /images/20221005/603367426f0841de9f765be71b623cb4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue(七) ：重写elementUI默认上传行为

页面： <el-upload action="上传接口url地址" :http-request="uploadSectionFile" multiple accept

￡神魔★判官ぃ/ 2023年05月28日 05:22/ 0 赞/ 3 阅读

相关【elementui】element ui重置tree

> `前言` 在点击一条数据时，希望tree默认打开选中的，这个已经实现。现在的问题是，点击一条就打开一部分，前面数据打开的node节点没有关闭。解决办法：

Myth丶恋晨/ 2023年01月20日 12:53/ 0 赞/ 396 阅读

相关 vue ElementUI table 组件动态表头

页面展示从接口获取的数据到 table 里面，包括表头和表数据 html代码 <el-table :data="compareList" border size=

旧城等待，/ 2023年01月05日 12:53/ 0 赞/ 222 阅读

相关重写的介绍/重写与重载的区别

文章目录前言一、在Java中什么是“重写”？二、关于重写的刚性需求三、代码演示重写方法的调用顺序小结

蔚落/ 2022年10月27日 13:44/ 0 赞/ 200 阅读

相关 elementUI的表头重写

先看效果： ![20210608152024799.png][] 表头单元格： <el-table-column v-if=

以你之姓@/ 2022年10月05日 09:56/ 0 赞/ 238 阅读

相关重写

class Animal2 \{ public String getDesc() \{ return "Animal"; \} public Strin

红太狼/ 2022年08月07日 16:51/ 0 赞/ 167 阅读

相关 PHP类的继承、重写、重写...

类有两个功能： > 1. 实例化对象 > 2. 被其他的类所继承类的继承: extends > 特点 : 单继承,多实现; > 在PHP中，一个类只能继承自一个

「爱情、让人受尽委屈。」/ 2022年06月02日 03:11/ 0 赞/ 350 阅读

相关 elementui自定义表头

前几天接到了一个这样的需求 ![这个表格的上面有两行显示文字，而且是变量][8739] 整个项目主要用的element-ui+vue，于是就去element-ui中寻找,找

约定不等于承诺〃/ 2022年04月23日 00:48/ 0 赞/ 473 阅读

相关 elementui自定义表格头，自定义表头table

elementUI的样式我觉得已经非常完美了，不过还是要根据UI来设置表格的头部。首先在组件标签中这样写，header-cell-style绑定一个变量即可自定义表头

叁歲伎倆/ 2022年04月08日 10:21/ 0 赞/ 1240 阅读

相关重写&&重载的区别

![1426623-20180809222153597-1799236193.png][] 转载于:https://www.cnblogs.com/yikuan-919/p/

朴灿烈づ我的快乐病毒、/ 2021年12月16日 16:37/ 0 赞/ 358 阅读