element 的 el-cascader 组件获取级联选中label和value值

在 Element UI 的 el-cascader 组件中，可以通过监听 change 事件来获取级联选择的所有节点的 label 和 value。你可以在事件处理函数中访问 val 参数，它是一个数组，包含了每一级选中项的信息。

以下是一个简单的例子：

<template>
  <el-cascader
    :options="options"
    @change="handleCascaderChange">
  </el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'guid1',
          label: 'Node1',
          children: [
            {
              value: 'guid-1-1',
              label: 'Child1',
            },
            // ... 更多子选项
          ],
        },
        // ... 更多顶级选项
      ],
    };
  },
  methods: {
    handleCascaderChange(val) {
      // val 是一个数组，包含每一级选中的节点信息
      console.log(val); // 例如: [{value: 'guid1', label: 'Node1'}, {value: 'guid-1-1', label: 'Child1'}]
      
      // 获取最后一个元素，即最后一级选中的节点信息
      const lastNode = val[val.length - 1];
      console.log('Label:', lastNode.label); // 输出最后一级选中的 label
      console.log('Value:', lastNode.value); // 输出最后一级选中的 value
    },
  },
};
</script>

在这个例子中，每次级联选择发生变化时，handleCascaderChange 方法都会被调用，并且会输出当前选中项的 label 和 value。如果需要获取所有级别的 label 和 value，可以直接访问 val 数组中的每个元素。