位置: IT常识 - 正文

vue2 ElementUI 表单标签、表格表头添加问号图标提示(element-ui表格)

编辑:rootadmin
vue2 ElementUI 表单标签、表格表头添加问号图标提示 文章目录1. 问题背景2. element-ui悬浮提示定义3. 基础4. 延申5. 参考1. 问题背景

推荐整理分享vue2 ElementUI 表单标签、表格表头添加问号图标提示(element-ui表格),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui提交表单,elementui form表单,vue element 表格,element form表单,vue element 表格,vue element 表格,vue elementui表格,elementui form表单,内容如对您有帮助,希望把文章链接给更多的朋友!

使用element-ui有时候需要对表格的表头、表单的标签进行自定义,添加问号的悬浮提示。

要达到的效果,如图所示:

2. element-ui悬浮提示定义

https://element.eleme.cn/#/zh-CN/component/tooltip

<!-- placement=top 顶部提示 --><!-- effect=dark 风格 --><el-tooltip content="需要提示的内容" placement="top" effect="dark"><!-- 提示的内容在 Dark 按钮上面显示 如下图:--> <el-button>Dark</el-button></el-tooltip>

3. 基础定义问号图标,图标上方显示tooltip提示内容

代码:

<!-- 把这段html摆放到正确的位置,就完成了tooltip提示 --><span> <el-tooltip placement="top"> <div slot="content"> Tips: 提示的内容 </div> <!-- elementui图标库:显示黑色的问号图标 --> <i class="el-icon-question" /> </el-tooltip></span>

实现效果:

为什么不写content属性和里面的提示内容也能显示?

官网明确定义了↓↓↓

vue2 ElementUI 表单标签、表格表头添加问号图标提示(element-ui表格)

通过slot插槽完成content内容的定义,如上面代码 div 里面的内容:一定要注意插槽的使用方式,未定义的插槽不能使用哦!

<div slot="content"> Tips: 提示的内容 </div>4. 延申自定义表单标签的label,显示问号提示信息

代码:

<el-form-item label="itemLabel名字" label-width="155px"> <!-- slot="label" ==> 自定义label的插槽 --> <template slot-scope="{}" slot="label"> <span>itemLabel名字</span> <el-tooltip class="item" effect="dark" placement="top"> <!-- 问号的图标 --> <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i> <!-- 提示的内容 --> <div slot="content"> 内容提示 </div> </el-tooltip> </template> <!-- el-form-item表单内容 --> <template> <el-select v-model="data" size="small"> <el-option label="A" value="A"></el-option> <el-option label="B" value="B"></el-option> </el-select> </template></el-form-item>

实现效果:

使用的插槽:

https://element.eleme.cn/#/zh-CN/component/form

自定义表格表头提示信息,显示问号提示信息

代码:

<el-table-column prop="字段名" align="center" sortable min-width="180"> <!-- 自定义表头的插槽 solt=header --> <template slot-scope="{}" slot="header"> <!-- 等同于 <===> label="表头名" --> <span>表头名</span> <el-tooltip class="item" effect="dark" placement="top"> <!-- 显示的问号 --> <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i> <!-- 提示插槽 --> <div slot="content"> <p>Tips:提示的内容</p> </div> </el-tooltip> </template> <!-- 表格内容 --> <template slot-scope="scope"> {{scope.row.name }} </template></el-table-column>

实现效果:

使用的插槽:

https://element.eleme.cn/#/zh-CN/component/table

注意!!!

以tooltip提示代码为基础,使用各标签支持的 slot(插槽) 哪里需要哪里插。

5. 参考VUE系列之element表单el-form-item自定义labelel-table表格怎么在表头的某项添加提示信息vue插槽(slot)详解如何理解Vue.js的组件中的slot?
本文链接地址:https://www.jiuchutong.com/zhishi/287303.html 转载请保留说明!

上一篇:vue+el-upload 上传图片和视频小总结(vue上传文件和后端upload)

下一篇:Gharial野生动物保护区中的两只玫瑰环鹦鹉,印度中央邦 (© Pete Oxford/Minden Pictures)(野生动物huan)

  • 苹果手机刚换的电池掉电特别快(苹果手机刚换的新电池电量掉的很快)

    苹果手机刚换的电池掉电特别快(苹果手机刚换的新电池电量掉的很快)

  • 苹果耳机续航时间(苹果耳机续航时间多久)

    苹果耳机续航时间(苹果耳机续航时间多久)

  • iphone8能不能用5g(iPhone8能不能用nfc)

    iphone8能不能用5g(iPhone8能不能用nfc)

  • push是什么指令(PUSH是什么指令)

    push是什么指令(PUSH是什么指令)

  • 华为售后可以随时去贴膜吗(华为售后可以随时换屏吗)

    华为售后可以随时去贴膜吗(华为售后可以随时换屏吗)

  • 小米盒子身份验证出现问题是怎么回事

    小米盒子身份验证出现问题是怎么回事

  • 拼多多退换货运费谁承担(拼多多退换货运费多少钱)

    拼多多退换货运费谁承担(拼多多退换货运费多少钱)

  • 手机没用电量就少了是什么原因(手机没用电量就少了还发烫)

    手机没用电量就少了是什么原因(手机没用电量就少了还发烫)

  • 拍立得为什么拍出来是黑色的(拍立得为什么拍出来偏的)

    拍立得为什么拍出来是黑色的(拍立得为什么拍出来偏的)

  • 固态硬盘有几种类型和接口(西部数据m2固态硬盘有几种)

    固态硬盘有几种类型和接口(西部数据m2固态硬盘有几种)

  • 手机突然扫二维码模糊(手机扫二维码没反应)

    手机突然扫二维码模糊(手机扫二维码没反应)

  • 小米手机怎么重命名照片(小米手机怎么重置密码)

    小米手机怎么重命名照片(小米手机怎么重置密码)

  • 快手评论抢置顶什么意思(快手评论抢置顶网站)

    快手评论抢置顶什么意思(快手评论抢置顶网站)

  • iphone11和11Pro有什么不同(iphone11pro 和11)

    iphone11和11Pro有什么不同(iphone11pro 和11)

  • qq自动转换语音怎么关闭(qq语音消息自动转文本什么意思)

    qq自动转换语音怎么关闭(qq语音消息自动转文本什么意思)

  • 荣耀v20是什么指纹解锁(荣耀v20功能)

    荣耀v20是什么指纹解锁(荣耀v20功能)

  • 微信收款能直接到银行卡吗(微信收款能直接到银行卡里吗)

    微信收款能直接到银行卡吗(微信收款能直接到银行卡里吗)

  • 手机提示支付风险怎么关闭(手机提示支付风险怎么关)

    手机提示支付风险怎么关闭(手机提示支付风险怎么关)

  • 纯固态512g够用吗(512gb纯固态硬盘够用吗)

    纯固态512g够用吗(512gb纯固态硬盘够用吗)

  • 抖音系统消息怎么删除(抖音系统消息怎样打开)

    抖音系统消息怎么删除(抖音系统消息怎样打开)

  • airpods暂停按哪里(airpods暂停之后怎么继续播放)

    airpods暂停按哪里(airpods暂停之后怎么继续播放)

  • lrmx格式用什么打开(lmk格式)

    lrmx格式用什么打开(lmk格式)

  • 6sp摄像头抖动(6sp摄像头抖动原因)

    6sp摄像头抖动(6sp摄像头抖动原因)

  • 真实有效的win10 21H1企业版激活密钥推荐 附激活工具(真实有效的18岁身份证)

    真实有效的win10 21H1企业版激活密钥推荐 附激活工具(真实有效的18岁身份证)

  • Vue实战篇三十五:实现滑动拼图验证登录(vue实例教程)

    Vue实战篇三十五:实现滑动拼图验证登录(vue实例教程)

  • 发货过程
  • 建筑业收到预收款预缴增值税
  • 营业费用和管理费用比较
  • 测绘费开票需备注吗
  • 新税法讲课费如何代缴个税
  • 银行贷款印花税是什么意思
  • 建行分期通
  • 什么叫调表不调帐
  • 煤矸石算能源吗
  • 仓储货架工厂仓库货架
  • 小企业营业外支出
  • 企业期货投资收益何时记账的
  • 预付材料款会计分录
  • 采购合同可以包含安装吗
  • 纳税人签章填什么
  • 少数股东损益借方增加还是贷方增加
  • 商品流通企业代表企业
  • 无形资产怎么计算摊销
  • 发票的开具时效为
  • 商砼税率是多少
  • 人身意外保险费可以扣除企业所得税吗
  • 电池消费税征税范围
  • 无租使用房产如何征收企业所得税
  • 其他应收款押金计提坏账吗
  • 公司股权转让流程是先工商还是税务
  • 幼儿园会计做账实操
  • 企业间借款增值税怎么算
  • 有限公司注册资金多少好
  • PHP:mb_substitute_character()的用法_mbstring函数
  • 真三国在哪下载
  • 什么情况下专硕可以调剂学硕
  • 低值易耗品报废时有残料价值收回的应冲减当月成本费用
  • 浏览器并发请求队列数量怎么设置
  • 企业长期资金来源有哪些
  • 微信小程序开发一个多少钱
  • thinkphp原理及优缺点
  • telnet命令大全
  • mysql事件使用方法
  • 优先股可转让吗
  • 两个公司可以是一个注册地址吗
  • 海关缴款书上完税价格含增值税吗
  • 进口税 增值税
  • sql主键是什么意思
  • sql,server
  • 增值是什么意思解释
  • 增值税发票跨月可以作废吗
  • 库存股属于什么类科目,借贷方向
  • 无形资产减值准备借贷方向增减
  • 应交税金在贷方是什么意思
  • 城建税多交了怎么办
  • 费用报销票据可以跨年吗
  • 实收资本减少的要交什么税
  • 核定应税所得率征收
  • 生产性服务企业税率
  • 采购方退货的会计分录
  • 12月费用1月报销的账务处理
  • 以前年度的亏损
  • 公章变更需要到哪里办理
  • 久期缺口计算公式解析
  • 微软6月24号
  • windows电源图标消失
  • window 虚拟化
  • 有备而来有备而去
  • xp系统如何设置默认软件
  • Centos 6.4 安装dnsmasq的方法
  • win10raw预览
  • 安卓获取设备信息
  • unity as
  • 前端html中怎么让文字左移
  • android真机调试解析包错误
  • [置顶]从lv2开始开挂的原勇者候悠闲的异世界生活
  • rsa加密算法python
  • Unity AssetBundle爬坑手记
  • jquery鼠标位置
  • 江苏国税电子税局
  • 税务局追缴社保流程及办理期限
  • 甘肃华能能源开发有限公司
  • 服务承诺口号八个字
  • 地税是什么时候开始征收耕地的呢
  • 收购晾晒烟叶,支付价款20万元,支付价外补贴2万元
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设