element-plus去除el-dropdown组件当鼠标移入文本时会出现边框

我这一生如履薄冰~2025-12-25 8:52

问题描述

如图，使用element-plus, 在table组件中使用 dropdown 下拉菜单时，当鼠标移入聚焦按钮会出现边框

javascript 复制代码

<template>
  <el-table :data="tableData" ref="tableRef">
    <el-table-column label="操作" fixed="right">
      <template #default="{ row }">
        <div style="display: flex">
          <el-button size="small" type="primary" link>查看</el-button>
          <el-button type="primary" size="small" link>年度考核</el-button>
          <el-dropdown size="small">
            <el-button size="small" type="primary" link>更多</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>迁移</el-dropdown-item>
                <el-dropdown-item>退休</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
                <el-dropdown-item>审批</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

原因分析：

通过浏览器控制台发现是该属性影响

找到问题直接解决

c 复制代码

.el-button:focus-visible {
  outline: unset;
}

outline 是CSS的属性， outline属性是在一条声明中设置多个轮廓属性的简写属性。

outline 和 border 属性很类似。但有如下区别：

1.outline 不占据空间，绘制于元素内容周围。

2.根据规范，outline 通常是矩形，但也可以是非矩形的。

网上搜索找到的其他解决办法

c 复制代码

::v-deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}