element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)

这篇具有很好参考价值的文章主要介绍了element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element-ui中的cascader级联选择器,官网文档中并没有提供方法直接获取当前选择的Object,这里特别需要注意element-ui的版本问题,不同的版本需要用到不同的方法。

2.7.0版本之前

可以用this.$refs[‘cascader’].currentLabels获取选中节点。

<el-cascader ref="groupList" :options="checkGroup" v-model="addForm.plot_group" @change="handleChange" :filterable="true" style="width: 100%" />   

//获取节点label内容

   handleChange(value) {
      let nodesInfo = this.$refs["groupList"].currentLabels;
    },

因为安装的element-ui版本高于2.7.0版本,所以没有给currentLabels获取到的节点内容截图。

2.7.0版本以及2.7.0版本之后

可以用this.$refs[‘cascader’].getCheckedNodes()获取选中节点,currentLabels在2.7版本给移除了。

<el-cascader ref="groupList" :options="checkGroup" v-model="addForm.plot_group" @change="handleChange" :filterable="true" style="width: 100%" />   

//获取选中节点的所有内容

   handleChange(value) {
      let nodesInfo = this.$refs["groupList"].getCheckedNodes();
    },

cascader 级联选择器getcheckednodes,element ui,js,vue,javascript,前端,elementui

//获取选中节点的最后一级的内容(如:获取label)

   handleChange(value) {
      let nodesInfo = this.$refs["groupList"].getCheckedNodes()[0].label;
    },

cascader 级联选择器getcheckednodes,element ui,js,vue,javascript,前端,elementui文章来源地址https://www.toymoban.com/news/detail-592727.html

到了这里,关于element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui cascader级联选择器 动态加载以及回显

    当数据比较多的时候,一次性获取全部数据速度太慢,而且体验不太好,所有需要用到懒加载,一级一级的选择数据就能很好避免速度慢的问题。 以及我们使用el-cascader加载默认值的时候,cascader的输入框和联级选择框都会遇到的回显问题。看代码!!! 参数说明: value / v-model 选中

    2024年02月15日
    浏览(47)
  • element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门

    实现效果 当点击的 根选项 有 子选项 时,会向后台发送请求,并且接收数据实现动态加载。 点击特殊选项时,可以禁用其他选项。 相关代码 props prop handleClassOrStudentChange

    2024年02月11日
    浏览(29)
  • Vue+element-ui的el-cascader实现动态添加删除级联地点输入框

    实现省市区三级地点级联选择,可联想; 包括始发地点、途径地点、终止地点,始发地点、终止地点均为一个,途径地点可以没有也可以是多个; 用户可以动态添加/删除途径地点。 使用级联选择器Cascader需要的树形数据,前端请求到后端获取省市区数据并处理为elementui官网

    2024年02月04日
    浏览(35)
  • 前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

    最近做项目时,遇到一个需求:在一个排班表中,展示人员的值班情况,点击单元格,弹出下拉框,修改人员排班信息。 由于下拉框选择内容是树状结构,这里使用了element-ui中级联组件cascader,设置单选模式即可。但是在官方的文档中没找到默认展开下拉框的api,折腾了一番

    2024年02月01日
    浏览(35)
  • vue中使用element-ui ,设置级联选择器高度问题

    我本来以为设置elemnt-ui组件样式需要用到深度选择器,然后找了好多关于深度选择器的,比如 /deep/ ::v-deep 后来才明白是权重不够,解决方法如下 1、在全局css中设置 缺点:所有级联选择器的高度都是固定的 结论:只有在所有页面级联选择器都一致的情况下或者只有一个级联

    2024年02月12日
    浏览(35)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(30)
  • vue+element Cascader 级联选择器 > 实现省市区三级联动

    看完我们就开始啦 完美(实现后别忘记动动小手点个赞哦~) 请安装指定版本的element-china-area-data(5.0.2),否则可能会导致报错:CodeToText为undefined(我就遇到了(嘘),要注意哦~) ↩︎

    2024年02月16日
    浏览(43)
  • Naive UI 组件使用体验之-级联选择 Cascader

    地址区域选择 安装依赖 npm install naive-ui -D 按需引入之-手动引入 使用 这里我们是要对收货地址进行一个增加操作。 我们这里只针对 所在地址 进行说明。 获取region 这里需要通过接口提前请求

    2024年02月11日
    浏览(26)
  • element 的 el-cascader 组件获取级联选中label和value值

    1.  多选时  获取 cascader 级联选择器的 label 值         需要给 el-cascader 加 ref 用以获取值  获取后的样式 2. 单选时获取 cascader 级联选择器的值     

    2024年02月12日
    浏览(42)
  • element-ui 月份选择器,当所选月份为当前月时,获取当天日期 。非当前月时,获取所选月的最后一天

    根据需求: 起始日期和结束日期的设置,当所选月份为当前月时,获取当天日期 。 非当前月时,获取所选月的最后一天  全部代码: 1、 Date.parse() 函数用于分析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间相差的毫秒数 Date.parse()的语法如下: 2、 获取

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包