首页 > 其他分享 >vue2使用elementUI组件el-tooltip指定元素进行提示信息(图标显示信息)

vue2使用elementUI组件el-tooltip指定元素进行提示信息(图标显示信息)

时间:2024-05-13 19:19:31浏览次数:14  
标签:el 显示 显示信息 元素 提示 提示信息 工具

 

          <el-table-column prop="operation" label="操作" border width="200px">
            <template slot-scope="scope">
              <div class="operation-icons">
                <!-- 查看按钮 -->
                <el-tooltip content="查看" placement="bottom">
                  <el-button type="text"
                    @click="handleView(scope.row)"
                    icon="el-icon-search"></el-button>
                </el-tooltip>
                <!-- 删除按钮 -->
                <el-tooltip content="删除" placement="bottom">
                  <el-button type="text"
                    @click="handleDelete(scope.row)"
                    icon="el-icon-delete"></el-button>
                </el-tooltip>
                <!-- 下载按钮 -->
                <el-tooltip content="下载" placement="bottom">
                  <el-button
                    type="text"
                    @click="handleDownload(scope.row)"
                    icon="el-icon-download"></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>

 

<el-tooltip>标签:在鼠标悬停在指定元素上时显示一段文字,提供额外的信息或解释。

<el-tooltip></el-tooltip>

 

content属性:用来设置工具提示的文本内容的属性。

<el-tooltip content="删除"></el-tooltip>

 

placement属性:用于设置工具提示的显示位置。

<el-tooltip  placement="bottom"></el-tooltip>
  • top:工具提示显示在目标元素上方。
  • bottom:工具提示显示在目标元素下方。
  • left:工具提示显示在目标元素左侧。
  • right:工具提示显示在目标元素右侧。

 

 

 

标签:el,显示,显示信息,元素,提示,提示信息,工具
From: https://www.cnblogs.com/warmNest-llb/p/18189825

相关文章

  • shell传递参数
    执行脚本时传入参数[root@VM-12-15-centoshome]#vitest.sh#编写如下echo"Shell传递参数实例!";echo"执行的文件名:$0";echo"第一个参数为:$1";echo"第二个参数为:$2";echo"第三个参数为:$3";#设置权限[root@VM-12-15-centoshome]#chmod+xtest.sh......
  • .vue在调用method为delete时,出现了无法传参的情况
    1.vue在调用method为delete时,出现了无法传参的情况:调用deleteapi发现想传入的json格式的参数并没有传入成功,如下:  这其实是vue的delete方法和其他postputget方法不一样导致的,需要修改delete传参格式就行了: Vue中axiosdelete请求参数踩坑:vue中axios的delete和post......
  • ElasticSearch 数据并发冲突处理
    一.概述Elasticsearch使用文档版本来控制文档的并发更新,并用于解决冲突。Elasticsearch从写入到检索的时间间隔是由刷新频率refresh_interval设定的,该值可以更新,但默认最快是1s,也就是这1秒之内如果同一条数据(文档的新版本必须复制到群集中的其他节点。Elasticsearch也是异......
  • 1250 - Table 'd' from one of the SELECTs cannot be used in field list
    1问题描述sql数据库查询接口union后orderby某字段,提示错误“1250-Table'd'fromoneoftheSELECTscannotbeusedinfieldlist“。移除orderby条件,就不会报错,但是不满足按照某个字段排序。 2方案解决修改排序条件为:orderbystatId即可。(union后的结果是字段......
  • Find Products of Elements of Big Array
    FindProductsofElementsofBigArrayA powerfularray foraninteger x istheshortestsortedarrayofpowersoftwothatsumupto x.Forexample,thepowerfularrayfor11is [1,2,8].Thearray big_nums iscreatedbyconcatenatingthe powerful......
  • Oracle 恢复之using backup controlfile 和 until cancel
    1、recoverdatabase/tablespace/datafileOracle以当前控制文件记录的SCN为恢复终点,将相关的datafile恢复到当前控制文件记录的SCN。控制文件不能比数据文件更旧。完全恢复,利用归档日志和在线重做日志。2、recoverdatabaseuntilcancel只能在sqlplus工具内执行。在丢失日......
  • Laravel Model中的$appends
    protected$appends是Laravel模型中的一个属性,用于指定哪些虚拟属性(Accessor)应该被包含在模型的数组或JSON表示中。虚拟属性是在模型中定义的,通过使用Accessors和Mutators来访问和修改模型属性的值。这些虚拟属性不会存储在数据库中,但可以通过模型实例进行访问和操作......
  • Mellanox网卡开启SRIOV
    Mellanox网卡开启SRIOVSRIOV是网卡虚拟化的一个重要功能。本文讲介绍如何在Mellanox网卡上开启SRIOV,并创建一些VF。参考:Mellanox网卡开启SRIOV方法简介-天翼云开发者社区-天翼云(ctyun.cn)在BIOS中开启IOMMU先查看是否已经开启了IOMMU。$dmesg|grep-idmar什么输......
  • 安装 elasticsearch & kibana (docker )
    1.elasticsearchdockerrun-e"ES_JAVA_OPTS=-Xms256m-Xmx256m"\--nameelasticsearch-p9200:9200-p9300:9300\-e"discovery.type=single-node"\-v/usr/share/elasticsearch/config:/usr/share/elasticsearch/config\-delasticsea......
  • cmakelist的一个例子
    一个例子,仅做参考用: CMAKE_MINIMUM_REQUIRED(VERSION3.12)set(ProjName"NetworkTest")project(${ProjName})string(FIND${CMAKE_CURRENT_BINARY_DIR}"/"pos0REVERSE)MATH(EXPRpos0${pos0}+1)string(SUBSTRING${CMAKE_CURRENT_BINARY_DIR}${po......