elementui动态数据二级联动

ElementUI提供了一个el-cascader级联选择器组件，可以实现二级联动。下面是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'province1',
          label: '省份1',
          children: [
            {
              value: 'city1',
              label: '城市1'
            },
            {
              value: 'city2',
              label: '城市2'
            }
          ]
        },
        {
          value: 'province2',
          label: '省份2',
          children: [
            {
              value: 'city3',
              label: '城市3'
            },
            {
              value: 'city4',
              label: '城市4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

在这个示例中，options数组中包含两个省份，每个省份下面有两个城市。当用户选择一个省份时，该省份下的城市将显示在下拉菜单中。当用户选择一个城市时，selectedOptions数组将包含选中的省份和城市的值。你可以根据需要使用这些值进行其他操作。