elementUi 级联选择主动获取已选中的对象

最新推荐文章于 2023-04-04 09:06:30 发布

原创最新推荐文章于 2023-04-04 09:06:30 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Element UI中使用级联选择器(cascader)，包括其属性设置、事件监听及如何通过ref获取已选中的节点。特别强调了在循环组件中获取选中节点的方法。

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

<el-cascader
     v-if="val.FIELDNAME == 'archiveCatalogNo'"
       :options="systemClassFondsList"
       v-model="archiveCatalogNoArr"
       @change="selectSystemFond"
       :props="{
         label: 'id',
         value: 'id',
         checkStrictly: true,
         expandTrigger: 'hover'
       }"
       :show-all-levels="false"
       ref="cascader"
       clearable
     >
  <template slot-scope="{ node, data }">
     <div @click="selectCheked('cascader8', $event)">{{ data.id }} -- {{ data.text }}</div>
   </template>
 </el-cascader>

假如想获取已选中的对象可使用内部方法 ref命名组件
如果该组件是循环出来的需使用
this.$refs.cascader[0].getCheckedNodes(); 否则【0】去掉