el-select
<el-select
v-model="value"
placeholder="Select"
size="large"
style="width: 240px"
>
<template v-for="item in optionDataList" :key="item[dataProp.value]">
<el-option
v-show="(item.enabled ?? true) || isShowNotEnable"
:label="item[dataProp.label]"
:value="item[dataProp.value]"
>
</el-option>
</template>
</el-select>
el-cascader
<el-cascader
v-model="value"
:options="optionDataList"
@expand-change="visibleChange"
>
<template #default="{ data }">
<span
:class="{ 'item-hide': !(data.enabled ?? true) && !isShowNotEnable }"
v-show="(data.enabled ?? true) || isShowNotEnable"
>{{ data.label }}</span
>
</template>
</el-cascader>
const visibleChange = (value: boolean) => {
if (value && !props.isShowNotEnable) {
nextTick(() => {
// 查找所有class为"item-hide"的元素
let elementsWithClassA = document.querySelectorAll(".item-hide");
console.log("elementsWithClassA", elementsWithClassA);
// 遍历这些元素
elementsWithClassA.forEach(function (element) {
// 找到父级的父级(祖父级)元素
let grandparentElement = element.parentElement && element.parentElement.parentElement;
// 确保找到的父级是期望的元素类型(例如li)
if (grandparentElement && grandparentElement.tagName === "LI") {
// 隐藏祖父级元素
grandparentElement.style.display = "none";
grandparentElement.setAttribute("className", "abc");
}
});
});
}
};