element-ui｜el-cascader 默认选中高亮第一层级的某个选项

原创已于 2024-03-21 09:35:55 修改 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #elementui

于 2024-03-18 16:46:16 首次发布

文章介绍了如何在Element-UI的级联选择器中设置默认选中项，包括当默认值固定和由后端返回时的具体代码实现，以及解决可能出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求要求点击级联选择器，展开下拉选项时，第一级的某个选项被默认选中高亮。be like

如果是默认选择某个固定值，比如'组件'：

<el-cascader v-model ="data" ref="cas" @visible-change="handleVisibleChange"/>

 handleVisibleChange(value) {
      if (!value) return
      // value为true 表示展示下拉选项
      if (!data.length) {
        // 要高亮的值对应的节点
        const node = this.$refs.cas.$refs.panel.getNodeByValue(['组件'])
        // 对应的高亮路径
        this.$refs.cas.$refs.panel.activePath = [node]
        // 展开节点
        this.$refs.cas.$refs.panel.expandNodes([node])
      }
    },

如果默认选中的值由后端返回，那么返回值格式应为：['组件']

参考资料：element-ui 多选框和级联选择的部分bug以及解决方法 - 掘金