el-cascader 和 el-select 根据某个属性显示隐藏选择项

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");
                }
            });
        });
    }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。