ant-design table 表格头增加tooltip注释

2023-11-05

ant-design table 表格头增加tooltip注释

注意屏蔽掉columns中的title属性才会有效果

<a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="columns"
        :data-source="list"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
      >
         <span slot="statisticalFactor">
          统计系数
          <a-tooltip placement="top">
            <template slot="title">
              <span> 统计系数,对日用量的稳定判断,无特殊情况可取1.0 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="growthRate">
          增长率
          <a-tooltip placement="top">
            <template slot="title">
              <span> 预计此物料未来的增加可能性,或基于特殊需求预估 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="strategicFactor">
          战略系数
          <a-tooltip placement="top">
            <template slot="title">
              <span> 基于策略性要求,进行的特别准备,通常由管理层决策设定 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="strategicNumber">
          战略数量
          <a-tooltip placement="top">
            <template slot="title">
              <span> 基于策略性要求,进行的特别准备,通常由管理层决策设定 </span>
            </template>
            <a-icon type="question-circle" />
          </a-tooltip>
        </span>
        <span slot="status" slot-scope="text, record">
          {{ statusFormat(record) }}
        </span>
        <span slot="operation" slot-scope="text, record">
          <a-divider type="vertical" v-hasPermi="['ssc:materialStabilityFactor:edit']" />
          <a @click="$refs.createForm.handleUpdate(record, undefined)" v-hasPermi="['ssc:materialStabilityFactor:edit']">
            <a-icon type="edit" />修改
          </a>
          <a-divider type="vertical" v-hasPermi="['ssc:materialStabilityFactor:remove']" />
          <a @click="handleDelete(record)" v-hasPermi="['ssc:materialStabilityFactor:remove']">
            <a-icon type="delete" />删除
          </a>
        </span>
      </a-table>

--表格columns 用slots插槽注入--------------------------------------------------------------
      columns: [
        // {
        //   title: '主键',
        //   dataIndex: 'id',
        //   ellipsis: true,
        //   align: 'center'
        // },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '供应商型号',
          dataIndex: 'supplierModel',
          ellipsis: true,
          align: 'center'
        },
        {
          // title: '统计系数',
          dataIndex: 'statisticalFactor',
          ellipsis: true,
          align: 'center',
          slots: { title: 'statisticalFactor' },
        },
        {
          // title: '增长率',
          dataIndex: 'growthRate',
          ellipsis: true,
          align: 'center',
          slots: { title: 'growthRate' },
        },
        {
          // title: '战略系数',
          dataIndex: 'strategicFactor',
          ellipsis: true,
          align: 'center',
          slots: { title: 'strategicFactor' }
        },
        {
          // title: '战略数量',
          dataIndex: 'strategicNumber',
          ellipsis: true,
          align: 'center',
          slots: { title: 'strategicNumber' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ]
  
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ant-design table 表格头增加tooltip注释 的相关文章

  • Ubuntu16.04安装jdk1.8

    Ubuntu16 04安装jdk记录 在官网上下载jdk版本 这个步骤就不详细说明 图形化的 很简单 移到 opt 目录下 个人习惯 sudo mv sudo mv jdk 8u151 linux x64 tar gz opt 解压缩到 o

随机推荐

  • 基于antd Tree实现可编辑菜单树,支持节点新增、删除

    基于antd3 Tree实现可编辑菜单树 支持节点新增 编辑 删除 基于antd Tree 实现了可编辑菜单树 支持以下功能 树节点 新增 编辑 删除 提示 以下代码 可参考 一 效果 二 完整代码 1 引入库 代码如下 示例 import
  • camera isp应用

    ISP应用及市场调研报告 1 调研目标及方法 1 1 调研目标 手机摄像头模组用ISP功能模块的市场走向及研发方向 为能够正确认识手机摄像模组行业提供技术及市场依据 2 ISP在模组上的应用原理 图一 手机摄像模组后端处理IC功能划分图 2
  • 锁相环工作原理

    锁相环 Phase Locked Loop 相位 锁 环路 简称 PLL 基本构成 f1 是输入频率 f2是输出频率 并且反馈给鉴相器 压控振荡器 压控振荡器的全称是 Voltage Controlled Oscillator 电压 控制
  • Unix时间戳和北京时间的相互转换(C语言实现 )

    一 问题背景 最近物联网项目中需要上传包含时间戳的设备数据到服务器平台 原本想把 年 月 日 时 分 秒 分别用一个 uint8 t 的数据类型去存储 即占用6个字节 但是在平台配置协议时 只有一种叫 Unix时间戳 的数据类型 Unix时
  • Restful API思路

    1 通过服务器重写规则 将所有请求走一个入口方法 例如index php的run 方法 2 通过 SERVER 找到请求方法 请求路径 请求参数 进行初始化参数 3 根据请求路径 走不同model处理 根据请求方法不同 走不同的处理方法 4
  • SystemVerilog 验证-测试平台编写指南学习笔记(3):连接设计和测试平台

    文章目录 1 为什么需要更高层次的方法连接 Testbench 与 DUT 2 SystemVerilog 接口 2 1 什么是接口 2 2 接口怎么连接 2 3 接口的优缺点 3 SystemVerilog 控制通信中时序问题地结构 3
  • 教你快速搭建个人网站

    一 搭建环境 云主机 华为云 操作系统 centos 7 x 源码 GitHub wyt1215819315 autoplan 这是一个自动化的托管系统 目前支持网易云 bilibili 米游社原神签到 测试地址https auto old
  • vue项目在ie11 浏览器运行出现错误解决方法

    一 基础配置 vue cli 版本 5 0 1 配置 browserslistrc 文件 gt 1 last 2 versions not dead ie gt 10 2 配置vue config js 配置 transpileDepend
  • C++堆栈详解

    前言 我们经常听见一个概念 堆 heap 和栈 stack 其实在数据结构中也有同样的这两个概念 但是这和内存的堆栈是不一样的东西哦 本文也会说明他们之间的区别的 另外 本文的只是是以C C 为背景来说明 不同的语言在内存管理上面会有区别
  • java实现只能有一个相同用户登录的功能

    需求 使用相同用户名登录系统 确保同名用户登录顶掉之前用户登录或者返回登录的功能 实现效果图 java实现 首先 1 web xml中配置监听器
  • CMD 查杀端口详细

    1 netstat aon findstr pid 2 taskkill pid id f 杀死端口 注 pid 后面的pid 事 查询的进程id
  • 多元回归预测

    文章目录 效果一览 文章概述 部分源码 参考资料 效果一览 文章概述 多元回归预测 Matlab贝叶斯算法 bayes 优化随机森林的数据回归预测 bayes RF回归预测 多变量输入模型 评价指标包括 MAE RMSE和R2等 代码质量极
  • 工程(二)——DeeplabV3+语义分割训练自制数据集

    目录 1 配置环境 1 1 利用conda新建一个环境并激活 1 2 安装pytorch 1 3 更新bashrc环境 2 安装DeeplabV3 2 1 克隆代码 2 2 下载数据集和预训练模型 3 测试算法 4 制作VOC数据集 4 1
  • windows查看进程,以及是哪个功能启用当前的服务的

    windows查看进程 理论 实战 理论 查看进程启动的详细信息 1 tasklist v 2 wmic process get caption commandline value 可以获取进程启动的命令行参数信息等 获取具体某个信息 1
  • 将经纬度坐标在ArcGIS软件中生成系列矢量数据

    目录 环境介绍 操作内容 操作步骤 1 将经纬度坐标值编辑在excel中 注意x y对应的分别是经度和纬度 2 打开ArcMap软件 加载 xls数据 3 需要选择地理坐标系 4 点矢量数据生成 5 线矢量数据生成 6 面矢量数据生成 环境
  • 【HBZ分享】Mysql的binlog格式分类(STATEMENT, ROW, MIXED)

    STATEMENT格式 全名Statement Based Replication SBR 会记录每一条SQL语句 即SQL怎么写的 他就会怎么记录 无论更改多少行 该格式都不在乎 他只会记录SQL 优点 由于只记录sql 不会记录每一行变
  • 【转】Lwip 断连,连接几次后不通及偶尔不通的问题.

    https blog csdn net hecong kit article details 24415693 新加这个函数 并在tcp in函数里调用一下 出现不通的原因是在网络状态不流畅的情况下 连续连接N次后 LWIP默认不在连接 新
  • 保持ssh会话不掉线

    客户端 sudo vim etc ssh config 之类的文件名 添加 ServerAliveInterval 20 ServerAliveCountMax 9999 服务器端 sudo vim etc ssh sshd config
  • 解决问题:jinja2.exceptions.UndefinedError: ‘form‘ is undefined

    在flask开发的过程中 我遇到了题目上的报错 现放出自己的代码 login py login html 在运行过程中 网址显示 由此可见 login html中存在问题 在终端的报错中可以看到 最后一项报错为 为解决该问题 我在网上搜集了
  • ant-design table 表格头增加tooltip注释

    ant design table 表格头增加tooltip注释 注意屏蔽掉columns中的title属性才会有效果