elementui动态数据二级联动

要实现 element-ui 的动态数据二级联动，可以使用 el-cascader 组件。首先需要在数据源中定义好一级和二级数据之间的关系，然后将该数据源绑定到 el-cascader 组件上。每当用户选择一级选项时，就需要更新二级选项的数据源，以实现二级联动效果。

以下是一个简单的示例代码：

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

<script>
export default {
  data() {
    return {
      options: [
        {
          id: 1,
          name: '一级选项1',
          children: [
            { id: 11, name: '二级选项1-1' },
            { id: 12, name: '二级选项1-2' }
          ]
        },
        {
          id: 2,
          name: '一级选项2',
          children: [
            { id: 21, name: '二级选项2-1' },
            { id: 22, name: '二级选项2-2' }
          ]
        }
      ],
      selected: []
    }
  },
  methods: {
    handleChange(value) {
      // 根据一级选项的值更新二级选项的数据源
      const selectedOption = this.options.find(opt => opt.id === value[0])
      this.$set(selectedOption, 'children', [
        { id: 31, name: '动态添加的二级选项' }
      ])
    }
  }
}
</script>

在上述代码中，我们通过定义 options 数组来定义了一级和二级选项的关系，并将其绑定到 el-cascader 组件上。在 handleChange 方法中，我们根据用户选择的一级选项的值，找到对应的选项，并更新其 children 属性，从而动态添加二级选项。