给可任意选择一级的el-cascader赋值时子节点radio不默认选中的解决方式

最新推荐文章于 2024-08-09 11:20:18 发布

渡城WEDU

最新推荐文章于 2024-08-09 11:20:18 发布

阅读量997

点赞数

分类专栏： Vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/ducheng_/article/details/128851039

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

针对el-cascader组件在Vue项目中子节点未默认选中的状况，通过在mounted生命周期钩子中使用$nextTick确保DOM渲染完成，然后找到所有选中节点，获取最后一个子节点的radio元素并添加is-checked类，以实现子节点的选中状态显示。

摘要由CSDN通过智能技术生成

问题呈现：
在这里插入图片描述
解决后：

代码：

      // 解决el-cascader子节点不默认选中问题
      this.$nextTick(() => {
        // 获取所有选中的节点
        let checkedLeaves = document.getElementsByClassName('in-checked-path')
        // 获取子节点
        let checkedLeaf = checkedLeaves[checkedLeaves.length - 1]
        // console.log('leaf', checkedLeaf)
        // 获取子节点中的radio元素
        let radio = checkedLeaf.childNodes[0].childNodes[0]
        radio.classList.add('is-checked')
      })

注：将该代码放在mounted中，由于此时元素不一定渲染完全，若有接口请求等异步操作，需要用async/await关键字，以此确保能获取到元素。
.in-checked-path在elementui中表示该节点路径被选中（即图中样式不同部分），需要给radio加上.is-checked使其变成被选中的节点