disabled状态el-dropdown,仍然可以触发el-dropdown-menu里面的子项el-dropdown-item显示,
点击仍然有下拉框,这是为什么呢? 是我使用不对吗?
<!-- 下拉选择组件 -->
<!-- 不知道为什么这里使用disabled并不起效果。禁用状态时,样式生效了,但是点击仍然可以展示出下拉选项??-->
<el-dropdown
:disabled="activitySelectedIds.length === 0" // 这里的禁用,难道不是控制下拉选项的展示吗?
trigger="click"
@command="handleCommand">
<span class="el-dropdown-link"
style="display:inline-block;width: 100%;height: 100%;">
批量认定
</span>
<el-dropdown-menu slot="dropdown"> // 并不受el-dropdown :disabled的影响,点击dropdown 仍然会展示
<el-dropdown-item
v-for="item1 in submitHonorDtos" :key="item1.id"
:command="{activitySubmitUserId:activitySelectedIds,submitHonorId:item1.id}">
{{ item1.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
我只能包裹一层button,然后修改下jtml结构加以解决
<el-button
class="el-button batch-verify"
:disabled="activitySelectedIds.length === 0"
v-show="(adminFlag == 1 || isChargePerson == 1 || (clazzIds&&headmasterAuditFlag == 1)) &&
(verifyStatus == 2 || verifyStatus == 3)">
<!-- 下拉选择组件 -->
<!-- 不知道为什么这里使用disabled并不起效果。禁用状态时,样式生效了,但是点击仍然可以展示出下拉选项??-->
<el-dropdown v-if="activitySelectedIds.length !== 0"
:disabled="activitySelectedIds.length === 0"
trigger="click"
@command="handleCommand">
<span class="el-dropdown-link"
...
</el-dropdown-menu>
</el-dropdown>
<span class="el-dropdown-link"
v-else
style="display:inline-block;width: 100%;height: 100%;">
批量认定
</span>
</el-button>
为什么这里使用disabled并不起效果。禁用状态时,样式生效了,但是点击仍然可以展示出下拉选项?
是我使用错了吗?
可能原因:el-dropdown-menu组件的v-model或visible属性没有与disabled状态关联起来。在el-dropdown组件中设置disabled属性只是给整个下拉菜单添加了禁用状态,但并不影响el-dropdown-menu组件及其子项的显示和交互。
可以通过在el-dropdown-menu组件上使用v-if或者计算属性来控制其显示,并在el-dropdown组件的disabled状态发生变化时,同步更新此控制显示的条件。