el-cascader 点击获取更多数据

最新推荐文章于 2024-06-03 22:20:09 发布

原创最新推荐文章于 2024-06-03 22:20:09 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #es6 #vue.js

Element 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在 Vue.js 应用中利用 Element UI 的 el-cascader 组件获取选中节点的数据。通过监听 change 事件并调用 getCheckedNodes 方法，可以获取到用户的设备查询选择，并更新相关设备 ID、序列号和名称等信息。

部署运行你感兴趣的模型镜像

重点语句

let getCheckedNodes = this.$refs.cascader.getCheckedNodes()[0]

<el-cascader ref="cascader"
             placeholder="设备查询"
             :options="treeData"
             filterable
             @change="handleChange"></el-cascader>


handleChange () {

  let getCheckedNodes = this.$refs.cascader.getCheckedNodes()[0]
  let data = getCheckedNodes.data
  console.log(data)

  this.currentID = data.deviceId
  this.deviceSerialId = data.deviceSerialId
  this.currentName = data.label // 切换当前选中的设备名称
  this.deviceSerialName = data.deviceSerialName// 当前设备的设备类型

},