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();
    },

element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)_第1张图片

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

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

element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)_第2张图片

你可能感兴趣的:(element,ui,js,vue,javascript,前端,elementui)