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