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

 

          <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:工具提示显示在目标元素右侧。

 

 

 

posted @ 2024-05-13 19:15  学Java的`Bei  阅读(1028)  评论(0编辑  收藏  举报