位置: 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)

  • win10怎么截屏(win10怎么截屏幕)

    win10怎么截屏(win10怎么截屏幕)

  • word右边对不齐怎么办(word右边对不齐格式怎么改)

    word右边对不齐怎么办(word右边对不齐格式怎么改)

  • 快手怎么隐藏在线状态(快手怎么隐藏在主页面上)

    快手怎么隐藏在线状态(快手怎么隐藏在主页面上)

  • airpods能连两个手机吗(airpods能连两个iPhone吗)

    airpods能连两个手机吗(airpods能连两个iPhone吗)

  • 小米9充电多少w(小米9充电多少快充)

    小米9充电多少w(小米9充电多少快充)

  • 魅族17发布会时间(魅族17pro发布会)

    魅族17发布会时间(魅族17pro发布会)

  • 手机qq怎么上传照片到相册(手机QQ怎么上传文件到群文件夹)

    手机qq怎么上传照片到相册(手机QQ怎么上传文件到群文件夹)

  • oppoa11x有红外线功能吗(oppoa11有没有红外)

    oppoa11x有红外线功能吗(oppoa11有没有红外)

  • 爱奇艺是腾讯的吗(爱奇艺是腾讯的还是阿里的)

    爱奇艺是腾讯的吗(爱奇艺是腾讯的还是阿里的)

  • 笔记本加内存条会快吗(笔记本加内存条还能保修吗)

    笔记本加内存条会快吗(笔记本加内存条还能保修吗)

  • vivoz6屏幕材质(vivoz6屏幕参数)

    vivoz6屏幕材质(vivoz6屏幕参数)

  • 麒麟990相当于电脑什么处理器(麒麟990相当于什么电脑cpu)

    麒麟990相当于电脑什么处理器(麒麟990相当于什么电脑cpu)

  • 怎样把电视剧下载到手机上(怎样把电视剧下载到百度网盘)

    怎样把电视剧下载到手机上(怎样把电视剧下载到百度网盘)

  • vivo淘宝分身版在哪下载(vivo手机淘宝分身)

    vivo淘宝分身版在哪下载(vivo手机淘宝分身)

  • mate30是ufs3.0吗(mate30pro ufs3.0)

    mate30是ufs3.0吗(mate30pro ufs3.0)

  • 已注册的微信号怎么改(已注册的微信号设置为辅助账号)

    已注册的微信号怎么改(已注册的微信号设置为辅助账号)

  • 快手对口型怎么拍的(快手对口型怎么显示歌词)

    快手对口型怎么拍的(快手对口型怎么显示歌词)

  • 华为mate30怎么关闭程序(华为mate30怎么关机重启)

    华为mate30怎么关闭程序(华为mate30怎么关机重启)

  • 淘宝怎么切换支付方式(淘宝怎么切换支付宝绑定)

    淘宝怎么切换支付方式(淘宝怎么切换支付宝绑定)

  • 探探左滑代表什么(探探左滑是)

    探探左滑代表什么(探探左滑是)

  • 米家蓝牙网关有哪些(米家蓝牙网关有什么作用)

    米家蓝牙网关有哪些(米家蓝牙网关有什么作用)

  • 摄像轴线是什么意思(简述摄像机操作要领及技巧,轴线的含义)

    摄像轴线是什么意思(简述摄像机操作要领及技巧,轴线的含义)

  • vivos1带人脸识别吗(vivo人脸识别手机)

    vivos1带人脸识别吗(vivo人脸识别手机)

  • excel数字转换(excel数字转换为万元)

    excel数字转换(excel数字转换为万元)

  • 鼠标中间的滑轮用不了了(鼠标中间的滑轮按下去有什么用)

    鼠标中间的滑轮用不了了(鼠标中间的滑轮按下去有什么用)

  • Mac系统中如何通过Dialogue进行iPhone电话录音(mac怎么同步)

    Mac系统中如何通过Dialogue进行iPhone电话录音(mac怎么同步)

  • mmdetection ValueError: need at least one array to concatenate解决方案

    mmdetection ValueError: need at least one array to concatenate解决方案

  • 附加税申报表里怎么填写
  • 去年多计提的工资今年直接冲掉当期费用,不调增可以吗
  • 税务会计的工作内容和心得
  • 其他应收款重分类
  • 会计凭证辅助项
  • 个体工商户必须缴纳社保吗
  • 过桥过闸通行费会计分录
  • 企业接受赠予企业固定资产是否免税
  • 办公室低值易耗品管理员职责
  • 营业外收入需要计提销项税吗
  • 环保税和环境税一样吗
  • 销售不动产税务处理
  • 外商企业需要交企业所得税吗
  • 认证专票税务处理怎么做?
  • 房地产收费依据与标准
  • 杜邦分析法的三个核心是什么
  • 增值税如何计提和结转
  • 如何解决电脑无法定位程序输入点
  • Win10 20H2 KB5001391补丁包更新内容汇总
  • 国家信用信息公司系公示
  • 以前年度损益调整结转到哪里
  • 受托代销商品会计科目
  • 我的电脑图标没了怎么恢复
  • 马齿笕对什么病最有效?
  • 看望员工家属
  • 子公司使用母公司授信
  • 收到过期银行汇票怎么办
  • 销售折扣增值税如何处理
  • 累计盈余科目怎么填
  • php与前端交互
  • token登录器
  • 人工智能示例
  • php导入php文件
  • vericut9.0环境变量
  • pyecharts怎么用
  • php错误和异常
  • sar参数设置4个数
  • 可行性研究报告合同属于什么合同
  • 电子发票税率怎么改
  • 自收自支是由主管部门拨款吗
  • java委托模式和代理模式
  • 公司处置汽车
  • 消费税算不算运费
  • 无形资产入股后大幅缩水怎么办
  • 建筑业综合税率13.8%
  • 增值税不得抵扣的情形
  • 属于原始凭证的有( )
  • 企业自查补税怎么报税
  • sql2008还原
  • 所得税交多了怎么留抵
  • 每月随工资扣的房费缴纳个税吗怎么算
  • 经营活动的现金流量占全部现金流量的比重越大
  • 未达到起征点销售额写多少
  • 税金及附加和营业税金及附加是一个科目吗
  • 政府扶持资金怎么做账
  • 防伪税控服务费全额抵扣申报表怎么填
  • 退回资金怎么做账
  • 财务费用利息收入怎么记账
  • 建筑业人工费怎么做账
  • 购买本公司产品未付款需要签名字吗
  • sap批量导入
  • 被遗忘的事件
  • win8.0升级win8.1
  • win8 分屏
  • tr linux 命令
  • win10 20h2体验
  • Linux利用sftp命令传输文件(极少数人知道的方法)
  • win7系统耳机设置在哪里
  • win7电脑磁盘突然不见了怎么办
  • python opencv
  • javascript HTML5 canvas实现打砖块游戏
  • webuploader.create
  • 使用粗盐热敷十大危害
  • javascript怎么学
  • 安卓作业电量广播
  • 关于研发费用的审计程序,下列说法中错误的是
  • 店面转让,房租怎么交税
  • 安置房公摊面积多少属于正常范围
  • 个体工商户怎样交税
  • 青岛工商全程电子化
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设