el-cascader获取key value

使用 el-cascader 组件获取 key-value 对，需要在提供的数据源中为每个选项指定 key 和 value。可以将 key 和 value 作为对象属性，然后传递给 el-cascader 组件的 options 属性。

以下是一个示例代码：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      @change="handleCascaderChange"
      :props="{ value: 'value', label: 'label' }"
    ></el-cascader>
    <p>Selected key: {{ selectedKey }}</p>
    <p>Selected value: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '1',
          label: 'Option 1',
          children: [
            {
              value: '1-1',
              label: 'Option 1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'Option 1-1-1',
                },
              ],
            },
          ],
        },
        // Add more options here...
      ],
      selectedOptions: [],
      selectedKey: '',
      selectedValue: '',
    };
  },
  methods: {
    handleCascaderChange(value) {
      const lastOption = value[value.length - 1];
      this.selectedKey = lastOption.value;
      this.selectedValue = lastOption.label;
    },
  },
};
</script>

在这个示例中，我们使用 options 数组来定义 el-cascader 的选项。每个选项对象都有一个 value 属性和一个 label 属性。通过设置 `:props="{ value: 'value', label: 'label' }"`，我们告诉 el-cascader 组件使用 value 属性作为选项的值，label 属性作为选项的显示文本。

当用户选择一个选项时，`@change` 事件会触发 `handleCascaderChange` 方法。在这个方法中，我们获取最后一个选项对象，并将它的 value 和 label 分别赋值给 `selectedKey` 和 `selectedValue` 变量。

你可以根据自己的数据结构和需求来调整示例代码中的 options 数组和处理选项变化的逻辑。