el-dropdown下的自定义内容必须在一个根元素中才能都打开下拉列表

原创 已于 2023-03-15 15:52:48 修改 · 863 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css3 #前端

于 2023-03-15 15:50:05 首次发布
文章讲述了在使用el-dropdown组件时遇到的问题，即TypeError提示不能设置svg元素的className属性，因为该属性只有getter。解决方案是更改自定义内容的根元素，避免使用svg，确保只有一个div作为根元素，以保证点击事件正常工作。

报错：TypeError: Cannot set property className of # which has only a getter，（svg不能作为el-dropdowm下自定义内容的根元素）

<el-dropdown class="right-button-setall" placement="bottom" @command="addFollowRecord">
    <div> // 只能有一个根元素，否则只有点击第一个div生效
      <div class="add-btn">
        <svg-icon icon-class="search-header-xinzeng" class="svg-icon" />
      </div>
      <span>新增跟进</span>
    </div>
    <el-dropdown-menu slot="dropdown" class="right-button-dropdown">
      <el-dropdown-item command="线上跟进">线上跟进</el-dropdown-item>
      <el-dropdown-item command="拜访">拜访</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

正确解决Uncaught TypeError : Cannot set property xxx which has only a getter异常的有效解决方法
wbajsjhhhhh的博客
05-05 4663
正确解决Uncaught TypeError : Cannot set property xxx which has only a getter异常的有效解决方法
vue3 el-tabs 和 el-dropdown 结合实现 tagsView 标签导航
小白小白从不日别的博客
09-11 975
当我们点击关闭标签导航的时候会自动切换到下一个；关闭下一个标签导航会自动切换到上一个。整个的方案就是这么两大部，但是其中我们还需要处理一些细节相关的，对于上面写的逻辑我们这里对其进行一个抽离封装成hooks。到这里的话我们的tagsView布局和功能就开发完成了。那么明确好了方案之后，接下来我们根据方案进行处理即可。这里我们会基于element-plus的。那么明确好了原理之后，我们就来看。那么接下来我们需要做的就是把。仅看这一个要求，很简单吧。也是一个很简单的功能。
vue+element搭建后台小总结 el-dropdown下拉功能
12-13
本文实例为大家分享了el-dropdown下拉功能的具体代码，供大家参考，具体内容如下 功能：点击el-dropdown 下拉  下拉的数据 从后台获取 遍历到界面上 且多个el-dropdown下拉 共用 一个 @command 事件  @command=”handleCommand” 上代码部分  html //全部城市 下拉 //handleCommand下拉事件 all_city点击后显示在上面的数据 item.label下拉的数据 :command点击传的值 用flag来区分同一个事件的不同处理方法 <el> <el-dropdown @comm
vue报错Eror in v-on handler: “TypeError: Cannot set property name of #＜File＞ which has only a getter“
茂茂的博客
04-20 5797
这个错误通常出现在使用 Vue 的 v-model 绑定一个文件上传表单元素时，在触发上传事件时尝试修改表单元素的值。 文件上传表单元素是只读的，因为浏览器不允许 JavaScript 直接设置它们的值。因此，当你试图修改一个文件上传表单元素的值时，就会出现这个错误。
el-dropdown自定义样式,不影响其他组件
song_song0927的博客
10-31 3843
Dropdown下拉菜单(el-dropdown)自定义样式,不影响其他组件
el-dropdown的command方法添加自定义参数
Gpointy的博客
07-05 811
【代码】el-dropdown的command方法添加自定义参数。
Element Dropdown下拉菜单的使用方法
10-15
在 Element 中，Dropdown（下拉菜单）是一个重要的组件，它提供了丰富的交互式菜单选项，通常用于显示更多操作或功能。在本文中，我们将深入探讨 Element Dropdown 的使用方法。 ### 基础用法 要创建一个基础的 ...
vue2项目el-table中嵌套el-dropdown, 下拉菜单事件不响应
Cocoon_Xu的博客
04-19 1271
最近在做项目改造，发现之前element-plus中正常使用el-dropdown，在element中没响应，查了官方文档了解到两个版本dropdown的事件不一样。在element中，使用common事件感觉有点绕弯子，所以我用了.native 修饰符的方式实现了下拉菜单的事件触发。.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。下面分别看一下两个版本的写法。
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
自定义指令实现el-select下拉菜单无限滚动
qq_53343891的博客
07-24 912
当我们在工作中需要使用到下拉菜单来使用数据，不管是有没有开启远程搜索，在面对数据量特别大的时候又正好遇到需要开启无限滚动的需求，而原生的elementplus组件库中的el-select又没有一个api可以满足这个需要，那么我们除了自己去封装一个下拉菜单，此时就可以在全局封装一个自定义指令来解决这个问题。
Dropdown下拉菜单组件自定义样式
前端必备小窝
10-14 1369
Dropdown下拉菜单组件el-dropdown自定义样式（背景色高亮自定义或者移除）
Element-Ui定制Dropdown组件
m0_62785037的博客
12-16 1225
Element-Ui定制Dropdown组件实现移入每一个item实现图标变色，移除后默认色
微信小程序封装自定义van-dropdown-item 下拉选择框
qq_41956361的博客
05-16 4251
微信小程序封装自定义van-dropdown-item 下拉选择框，封装组件
element的表格和el-dropdown自定义参数，传多个参数，解决办法
weixin_43871703的博客
06-17 3450
elementui的table的dropDownList定义多个参数。 <el-dropdown @command="toHomeView" style="color:green; margin-left:10px"> <span class="el-dropdown-link"> Preview Type<i class="el-icon-arrow-down el-icon--right"></i&
el-table嵌套el-dropdown实现动态下拉菜单操作
weixin_44135963的博客
12-07 6190
el-table嵌套el-dropdown实现动态下拉菜单操作
【ElementUI】el-dropdown 下拉菜单
joanmelon的博客
12-06 4975
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
el-dropdown下拉菜单样式
m0_65930596的博客
01-19 1851
【代码】el-dropdown下拉菜单样式。
element-plus中Dropdown下拉菜单组件的使用
casually的博客
03-19 1187
即：当queryType的值是name时，就显示【根据姓名查询的搜索框】；当queryType的值是number时，就显示【根据病历号查询的搜索框】。④在@command="changeQueryType"事件中，令自定义变量queryType的值为所选项的command值。①给每个项，绑定一个command值，并给el-dropdown组件添加@command事件。练习题目：请根据所选择的下拉菜单的类型，展示不同的输入框。当我们选择查询类型为“病历号”时，就显示病历号输入框。
elementplus el-dropdown-item使用自定义v-auth失效 button正常没权限隐藏 怎么回事
最新发布
10-18
<think>我们之前讨论过，`el-dropdown-item` 使用自定义指令 `v-auth` 失效的原因，是因为 `el-dropdown-item` 是动态渲染的，而自定义指令在初始绑定阶段无法作用到还未渲染的元素上。同时，我们给出了三种解决方案。现在，用户进一步询问为什么在 `el-button` 上使用正常，而在 `el-dropdown-item` 上失效，且无权限时按钮可以隐藏。 ### 原因分析 1. **渲染时机不同**： - `el-button` 是静态渲染的，在父组件挂载时就会渲染，因此自定义指令 `v-auth` 可以在其生命周期钩子中正确执行，判断权限并移除无权限的按钮。 - `el-dropdown-item` 是动态渲染的，它位于 `el-dropdown-menu` 中，而 `el-dropdown-menu` 通常是在点击下拉按钮后才渲染的。因此，在初始阶段，自定义指令绑定到 `el-dropdown-item` 时，该元素尚未渲染，导致指令逻辑无法执行。 2. **指令的生命周期钩子**： - 自定义指令（如 `v-auth`）通常会在元素挂载时（`mounted` 或 `beforeMount` 钩子）执行权限判断并决定是否显示。但对于动态渲染的元素，如果指令在元素创建之前就已经执行完毕，那么指令逻辑就不会再次触发。 3. **Element Plus 组件的封装**： - `el-dropdown-item` 组件内部可能使用了 `v-if` 或 `v-show` 来控制显示，其根元素可能被包裹在多层标签内，导致自定义指令无法正确获取到需要控制的元素。 ### 解决方案回顾 我们之前提出的三种解决方案中，最推荐的是**方法一：使用 `v-if` 配合权限检查函数**。因为这种方式可以确保在 `el-dropdown-item` 渲染之前就进行权限判断，从而避免指令失效的问题。 ### 示例代码 #### 方法一：使用 `v-if` 和权限检查函数 ```vue <el-dropdown> <span class="el-dropdown-link"> 下拉菜单 </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-if="checkAuth(&#39;system:role:edit&#39;)" @click="handleEdit" >编辑</el-dropdown-item> <el-dropdown-item v-if="checkAuth(&#39;system:role:delete&#39;)" @click="handleDelete" >删除</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <script setup> import { useStore } from &#39;vuex&#39;; const store = useStore(); const checkAuth = (permission) => { // 假设权限列表存储在 Vuex 的 state.buttons 中 return store.state.buttons.includes(permission); }; </script> ``` ### 为什么按钮可以正常隐藏？ 因为按钮（`el-button`）在初始渲染时就已经存在于 DOM 中，自定义指令 `v-auth` 的钩子函数能够在元素挂载时执行，检查权限并移除无权限的按钮。而对于 `el-dropdown-item`，它在初始渲染时并不在 DOM 中，所以指令钩子无法在正确的时机执行。 ### 相关技术点 1. **自定义指令的生命周期**： - 在 Vue 3 中，自定义指令有以下几个生命周期钩子（与 Vue 2 有所不同）： - `created`：在绑定元素的 attribute 或事件监听器被应用之前调用。 - `beforeMount`：在元素被插入到 DOM 前调用。 - `mounted`：在绑定元素的父组件及他自己的所有子节点都挂载完成后调用。 - `beforeUpdate`：在包含组件的 VNode 更新前调用。 - `updated`：在包含组件的 VNode 及其子组件的 VNode 更新后调用。 - `beforeUnmount`：在绑定元素的父组件卸载前调用。 - `unmounted`：在绑定元素的父组件卸载后调用。 对于动态组件，我们可能需要使用 `updated` 钩子来重新检查权限，但这种方法较为复杂，且需要确保在正确时机触发。 2. **Element Plus 下拉菜单的渲染机制**： - `el-dropdown` 使用 Vue 的 `Teleport` 或 `Popper` 来动态生成下拉菜单，这使得下拉菜单的内容在初始渲染时并不存在于父组件的 DOM 树中，而是按需生成。 ### 结论 `el-dropdown-item` 使用自定义指令 `v-auth` 失效的原因是**动态渲染导致的指令执行时机问题**。而 `el-button` 是静态渲染，因此指令可以正常生效。推荐使用 `v-if` 配合权限检查函数来替代自定义指令，以确保在动态渲染的组件中正确控制显示。 §§相关问题§§ 1. 如何正确注册和使用 Vue 3 的自定义指令？ 2. Element Plus 下拉菜单的动态渲染机制是怎样的？ 3. 在 Vue 3 中，如何优化动态生成组件的性能？ </think>### Element Plus 中 `el-dropdown-item` 使用 `v-auth` 失效的原因分析 根据引用[1]提到的 Element Plus 渲染机制，结合自定义指令特性，`el-dropdown-item` 使用 `v-auth` 失效的根本原因在于 **动态渲染时机冲突**： 1. **异步渲染机制** `el-dropdown-item` 属于动态渲染组件（点击下拉按钮时才生成 DOM 结构）。而自定义指令 `v-auth` 的钩子函数（如 `mounted`）**在父组件挂载阶段同步执行**，此时下拉项尚未渲染，导致权限判断逻辑无法执行[^1]。 2. **指令作用域差异** `el-button` 是静态组件（初始渲染即存在 DOM），指令可在 `mounted` 阶段正确操作 DOM。但 `el-dropdown-item` 被包裹在 `el-dropdown-menu` 内部，其真实 DOM 通过 `Popper.js` 动态生成，指令无法捕获其生命周期[^1]。 3. **组件封装层级** `el-dropdown-item` 实际渲染为多层嵌套结构： ```html <!-- 指令绑定在此处 --> <li class="el-dropdown-menu__item" v-auth="&#39;perm&#39;"> <!-- 但实际内容在内部 span --> <span>操作项</span> </li> ``` 权限验证后移除 `<li>` 标签会导致整个下拉项结构异常，而按钮是单一元素可直接移除。 --- ### 解决方案（推荐） #### 方法一：数据驱动权限过滤 ✅ ```vue <el-dropdown> <el-dropdown-menu> <!-- 提前过滤无权限项 --> <el-dropdown-item v-for="item in filteredActions" :key="item.id" @click="item.handler" > {{ item.label }} </el-dropdown-item> </el-dropdown-menu> </el-dropdown> <script setup> import { computed } from &#39;vue&#39;; import { useAuthStore } from &#39;@/stores/auth&#39;; const authStore = useAuthStore(); const menuActions = [ { id: 1, label: &#39;编辑&#39;, perm: &#39;edit&#39;, handler: handleEdit }, { id: 2, label: &#39;删除&#39;, perm: &#39;delete&#39;, handler: handleDelete } ]; const filteredActions = computed(() => { return menuActions.filter(item => authStore.hasPermission(item.perm)); }); </script> ``` #### 方法二：指令改造（监听下拉事件） ```typescript // auth.directive.ts export const vAuth = { updated(el, binding) { const { value } = binding; if (!checkPermission(value)) { el.parentNode?.removeChild(el); // 动态移除元素 } } } // 组件使用 <el-dropdown @visible-change="forceUpdate"> <el-dropdown-item v-auth="&#39;delete&#39;">删除</el-dropdown-item> </el-dropdown> ``` --- ### 为什么按钮（Button）可以正常隐藏？ 1. **同步渲染优势** `el-button` 在组件挂载时即存在于 DOM 树中，指令的 `mounted` 钩子可立即操作 DOM 2. **独立元素结构** 按钮是单一根元素组件，移除后不会破坏布局： ```html <!-- 移除整个button不影响其他元素 --> <button v-auth="&#39;create&#39;" class="el-button">创建</button> ``` --- ### 最佳实践建议 1. **避免在动态组件使用指令** 优先通过数据层（Vuex/Pinia）预过滤菜单项，而非操作 DOM 2. **统一权限校验入口** 封装 `useAuth()` 组合式函数，复用权限逻辑： ```ts // utils/auth.ts export function useAuth() { const check = (perm: string) => { return authStore.permissions.includes(perm); } return { check }; } ``` 3. **谨慎操作动态 DOM** 如需强制使用指令，配合 `el-dropdown` 的 `visible-change` 事件触发更新： ```vue <el-dropdown @visible-change="v => v && nextTick(() => {/* 触发指令更新 */})"> ``` > 数据驱动方案（方法一）可 100% 解决该问题，且符合 Vue 的响应式设计理念[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值