vue级联选择器后端返回数组怎么回显

如果后端返回的数组中包含父级和子级的信息，可以将父级和子级信息分别存储在不同的数组中，然后将父级数组作为级联选择器的第一级选项，子级数组作为级联选择器的第二级选项，并在选择父级后动态更新子级选项的数据源。

例如，假设后端返回的数据格式如下：

[
  {
    "id": 1,
    "name": "Parent 1",
    "children": [
      {
        "id": 11,
        "name": "Child 1-1"
      },
      {
        "id": 12,
        "name": "Child 1-2"
      }
    ]
  },
  {
    "id": 2,
    "name": "Parent 2",
    "children": [
      {
        "id": 21,
        "name": "Child 2-1"
      },
      {
        "id": 22,
        "name": "Child 2-2"
      }
    ]
  }
]

可以将父级信息存储在一个数组中：

[
  {
    "id": 1,
    "name": "Parent 1"
  },
  {
    "id": 2,
    "name": "Parent 2"
  }
]

将子级信息存储在另一个数组中：

[
  {
    "parentId": 1,
    "children": [
      {
        "id": 11,
        "name": "Child 1-1"
      },
      {
        "id": 12,
        "name": "Child 1-2"
      }
    ]
  },
  {
    "parentId": 2,
    "children": [
      {
        "id": 21,
        "name": "Child 2-1"
      },
      {
        "id": 22,
        "name": "Child 2-2"
      }
    ]
  }
]

然后在 Vue 组件中，可以使用 v-model 指令绑定选中的父级和子级信息，同时使用 computed 计算属性动态更新子级选项的数据源。示例代码如下：

<template>
  <div>
    <el-cascader v-model="selected" :options="parentOptions" :props="props" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 选中的父级和子级信息
      parentOptions: [], // 父级选项
      childOptions: [], // 子级选项
      props: { // 自定义选项属性名称
        value: 'id',
        label: 'name',
        children: 'children'
      }
    }
  },
  computed: {
    // 根据选中的父级信息动态更新子级选项的数据源
    childOptionsComputed() {
      const parentId = this.selected[0]
      const childOption = this.childOptions.find(item => item.parentId === parentId)
      return childOption ? childOption.children : []
    }
  },
  methods: {
    // 处理级联选择器的change事件
    handleChange(value) {
      this.selected = value
    }
  },
  mounted() {
    // 初始化父级选项和子级选项
    this.parentOptions = this.data.map(item => {
      return { id: item.id, name: item.name }
    })
    this.childOptions = this.data.map(item => {
      return { parentId: item.id, children: item.children }
    })
  }
}
</script>

在模板中，使用 el-cascader 组件渲染级联选择器，使用 v-model 指令绑定选中的父级和子级信息，使用 :options 属性绑定父级选项数据源，使用 :props 属性自定义选项属性名称，在 change 事件中更新选中的父级和子级信息。

在计算属性中，根据选中的父级信息动态更新子级选项的数据源。

在 mounted 钩子函数中，初始化父级选项和子级选项的数据源。