首页 > 其他分享 >el-table 表头添加Tooltip render-header动态传参

el-table 表头添加Tooltip render-header动态传参

时间:2024-04-09 11:46:18浏览次数:16  
标签:传参 el render 表头 header Tooltip table

给el-table表头添加Tooltip,光标移动到表头问号区域,自动弹出tooltip提示
render-header传参方式

   <el-table-column
          prop="usedCredit"
          label="已占授信额度(元)"
          width="140"
          header-align="center"
          align="center"
          :render-header="
            (h, obj) =>
              renderHeader(
                h,
                obj,
                '授信列表(正常状态的【授信额度(元)】)+ 授信列表(逾期状态的【待还本金金额(元)】'
              )
          "
        >
        </el-table-column>

js

    // 表头增加问号❓
    renderHeader(h, { column, $index }, content_desc) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: content_desc,
              placement: 'top',
            },
          },
          [h('span', { class: { 'el-icon-question': true } })]
        ),
      ]
    },

标签:传参,el,render,表头,header,Tooltip,table
From: https://www.cnblogs.com/qqcc1388/p/18123609

相关文章

  • Elasticsearch之倒排索引、索引操作
    目录一、Elasticsearch之倒排索引1.倒排索引是什么2.举例3.倒排索引待解决的问题二、Elasticsearch之索引操作2.1创建索引2.2查询索引配置2.3更新索引2.4删除索引一、Elasticsearch之倒排索引1.倒排索引是什么倒排索引源于实际应用中需要根据属性的值来查找记录,这种索......
  • Elasticsearch之-mapping 映射管理
    目录Elasticsearch之-mapping映射管理一、映射介绍1.1字段数据类型1.2映射参数二、创建索引时指定映射2.16.x的版本写法2.27.x版本以后2.3插入数据测试三、查看索引Elasticsearch之-mapping映射管理在Elasticsearch6.0.0或更高版本中创建的索引只包含一个mappingtype......
  • Elasticsearch之数据的增删查改(CURD)
    目录Elasticsearch之数据的增删查改(CURD)一、CURD之Create(增)二、CURD之Update(改)三、CURD之Delete(删)四、CURD之Retrieve(查)Elasticsearch之数据的增删查改(CURD)一、CURD之Create(增)注意:当执行PUT命令时,如果数据不存在,则新增该条数据,如果数据存在则修改该条数据(这种修改相当于删......
  • excel表格中的数据怎么四舍五入进行取整?
    在Excel中,如果输入了一些小数,但只需要保留整数位,可以按照四舍五入的规则进行数值切换。通常有两种方法可以实现这个操作。一、设置单元格格式1.首先,需要在Excel中选择想要进行转换的数据列。然后右键,选择单元格格式选项,打开单元格格式设置。2.切换到数字下方的,数值的选项,......
  • .net maui blazor路由和导航,传参,刷新
    .netmauiblazor路由和导航,传参,刷新参考:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-8.0页面:TestPage1.razor:@page"/test1/{Text}"<p>必填参数:@Text</p>@code{[Parameter]publicstring?Text{get;......
  • 实战:如何优雅的从 Skywalking 切换到 OpenTelemetry
    背景最近公司将我们之前使用的链路工具切换为了OpenTelemetry.我们的技术栈是:OTLPClient──────────►Collect────────►StartRocks(Agent)▲......
  • Elasticsearch 配置内置分析器(3)
    一.内置分析器(analyzer)内置分析器无需任何配置即可直接使用,也支持配置选项来更改其行为。下面示例,分别使用了自定义分析器与内置分析器PUTmy-index-000001{"settings":{"analysis":{"analyzer":{"std_english":{#自定义分析......
  • 05_ElementPlus安装过程
    官网:一个Vue3UI框架|ElementPlus(element-plus.org)1.安装:运行cmd,转到我的项目的目录下\vuedemo,执行命令:npminstallelement-plus--save2.整体导入Element-plus,修改mian.js文件import{createApp}from'vue'//导入Pinia的createPinia方法,用于创建Pinia实例......
  • Elasticsearch 悬挂索引分析和自己的一点见解
    在Elasticsearch的实战中,悬挂索引是一个既常见又容易引起困扰的概念。今天,我将分享一次处理集群状态为RED,原因为DANGLING_INDEX_IMPORTED 的实战经验,深入探讨悬挂索引的定义、产生原因、管理方法,以及如何有效处理它们,确保读者能够明白并解决自己面临的问题。值得一提的是,......
  • As a reader --> PAC-GPT: A Novel Approach to Generating Synthetic Network Traffi
    ......