@expand-change el-cascader 获取值

根据提供的引用内容，@expand-change事件是el-cascader组件的一个事件，用于在级联选择器展开或折叠时触发。要获取el-cascader的值，可以使用this.$refs['myCascader'].getCheckedNodes()方法，该方法返回一个数组，包含选中的节点的label和value值。具体代码示例如下：

handleAreaChange(val){
let selectedNodes = this.$refs['myCascader'].getCheckedNodes();
// 获取选中节点的label和value
let labels = selectedNodes.map(node => node.label);
let values = selectedNodes.map(node => node.value);
console.log(labels); // 输出选中节点的label值
console.log(values); // 输出选中节点的value值
}

相关问题

el-cascader获取label值

### 回答1：
el-cascader可以通过v-model绑定一个数组来获取选中的值，数组中每个元素代表一级或多级选中的选项。如果想要获取选中的label值，可以通过以下方式：

1. 在el-cascader组件上添加ref属性，例如：ref="myCascader"
2. 在需要获取label值的地方，通过this.$refs.myCascader.getLabel()方法获取选中的label值

示例代码：

<template>
  <div>
    <el-cascader
      ref="myCascader"
      v-model="selectedOptions"
      :options="options"
      @change="handleChange"
      clearable
      expand-trigger="hover"
      placeholder="请选择"
    />
    <p>选中的label值：{{ selectedLabel }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  },
  computed: {
    selectedLabel() {
      return this.$refs.myCascader.getLabel();
    }
  }
}
</script>

### 回答2：
el-cascader是一个基于ElementUI的级联选择器组件，其通过v-model绑定数据并实现省市区三级联动，提供了很多实用的特性。获取el-cascader组件中的label值，需要注意以下几点：

1. el-cascader的v-model值为一个数组，数组中每个元素都是当前选中的节点的value值，使用join方法可以将这些value值组成字符串。

2. el-cascader的props属性中，label属性指定了每个节点的显示文本，因此可以通过递归遍历整个级联选择器的选中节点，获取其所有节点的label值。通过设置emitPath属性为true，将会同时返回每个节点的路径。

3. 如果需要在选中节点时获取其label值，可以在el-cascader的change事件中，获取当前选中节点的完整路径以及节点的label值。

示例代码如下：

在template中：

<el-cascader
v-model="selectedOptions"
:options="options"
:props="{
value: 'value',
label: 'label'
}"
@change="handleChange"
emit-path
></el-cascader>

在methods中：

// 获取选中节点的label值和完整路径
handleChange(selectedValueArray, selectedOptions) {
let path = selectedOptions.map((option) => option.label).join("/");
let label = selectedOptions[selectedOptions.length - 1].label;
console.log(path, label);
// 在这里可以对label值进行处理，例如将其渲染到页面上
}

//获取整个级联选择器中所有选中节点的label值和路径
getSelectedLabels(selectedOptions) {
let labels = [];
selectedOptions.forEach((option) => {
labels.push(option.label);
if (option.children && option.children.length > 0) {
labels.push(...this.getSelectedLabels(option.children));
}
});
return labels;
}

//调用方法
let labels = this.getSelectedLabels(this.$refs.cascaderRef.getSelectedNodes());
console.log(labels.join("/"));

### 回答3：
el-cascader是一个Vue.js的级联选择器组件，它可以支持多级联动选择，但其默认的选项只有value和label。如果需要获取el-cascader中选中项的label值，可以通过以下几种方式实现：

1. 使用change事件监听器获取label值

el-cascader组件有一个change事件，每当选择器的值发生变化时就会触发该事件。我们可以在该事件中获取选中项的label值。具体操作如下：

<el-cascader :options="options" @change="handleChange"></el-cascader>

...

methods: {
  handleChange(value, selectedOptions) {
    // selectedOptions是一个数组，包含了每一级已选选项的详细信息
    let label = selectedOptions[selectedOptions.length - 1].label;
    console.log(label);
  }
}

2. 自定义显示label

在el-cascader组件中，通过自定义显示模板，也可以轻松获取label值。例如可以在模板中加入一个隐藏的输入框，将选中的label值赋给该输入框，然后通过JS获取输入框的值。代码如下：

<el-cascader :options="options" @change="handleChange" :show-all-levels="false">
  <template slot-scope="{options}">
    <input type="hidden" id="label-input" :value="options[options.length - 1].label">
    <span>{{ options[options.length - 1].label }}</span>
  </template>
</el-cascader>

...

methods: {
  handleChange() {
    let label = document.getElementById('label-input').value;
    console.log(label);
  }
}

以上就是两种获取el-cascader组件中选中项label值的方法，可以根据具体需求选择适合自己的方法。

el-cascader中的props

在 Element UI 的 el-cascader 组件中，props 是用于向组件传递数据的属性集合。以下是 el-cascader 中常用的 props：

- options：用于设置 Cascader 的选项数据，即级联菜单中的选项列表。
- props：用于自定义选项对象中的属性名，包括 label、value、children。
- value：用于设置 Cascader 的选中值，可以是一个数组或字符串，数组表示选中多个选项，字符串表示只选中一个选项。
- placeholder：用于设置 Cascader 未选中时的占位符文本。
- disabled：用于设置 Cascader 是否禁用。
- clearable：用于设置 Cascader 是否可清空选中值。
- separator：用于设置 Cascader 中选项之间的分隔符。
- filterable：用于设置 Cascader 是否可搜索选项。
- debounce：用于设置 Cascader 搜索选项时的防抖时间。
- expand-trigger：用于设置 Cascader 展开选项菜单的触发方式，可以是 click 或 hover。
- show-all-levels：用于设置 Cascader 是否显示所有级别的选项，即使级别没有选中任何选项。
- change-on-select：用于设置 Cascader 是否在选择选项后立即触发 change 事件。
- before-filter：用于设置在搜索选项之前触发的回调函数，可以用于设置搜索的选项列表。
- lazy：用于设置是否启用懒加载选项数据。

以上是 el-cascader 常用的 props，你可以根据自己的需要来选择使用哪些 props。