vue怎么判断后端返回数组中的item项不为空

### 转换数组对象为复杂嵌套结构 在 Vue2 项目中处理来自后端的数组对象并将其转换为目标格式——即数组内含数组再包裹对象的形式，可以采用 JavaScript 的高阶函数如 `map` 和解构赋值来完成这一操作。对于原始数据源是一个由多个对象组成的列表而言，目标是创建一个新的集合，其中每一项都是一个包含两个元素的小型数组：第一个元素可能是原对象的一个属性或整个对象本身；第二个则是另一个数组，该数组又包含了若干个键值对形式的对象。 假设从服务器接收到如下 JSON 数组： ```json [ {"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"} ] ``` 期望得到的结果形似这样： ```javascript [ [ ["id", 1], [{"key": "name", "value": "Alice"}] ], [ ["id", 2], [{"key": "name", "value": "Bob"}] ] ] ``` 为了达到上述目的，在 Vue 组件的方法部分编写一段逻辑用于执行此变换过程[^1]： ```javascript // 假设这是从API获取的数据 const apiData = this.$store.state.userData; // 或者通过axios请求获得 let transformedData = apiData.map(item => { let innerArray = []; // 添加ID作为首个元素 innerArray.push(["id", item.id]); // 创建内部对象数组 let keyValuePairs = Object.keys(item).filter(key => key !== 'id').map(key => ({ key, value: item[key] })); // 将这些键值对放入第二层数组里 innerArray.push(keyValuePairs); return innerArray; }); ``` 这段代码首先遍历了传入的每个对象 (`item`) ，构建了一个新的二维数组，其中第一维保存的是 ID 及其对应的值，而第二维度则容纳了一系列描述其他字段及其对应值得对象。注意这里过滤掉了 id 字段以避免重复显示[^2]。

如果后端返回的数组中包含父级和子级的信息，可以将父级和子级信息分别存储在不同的数组中，然后将父级数组作为级联选择器的第一级选项，子级数组作为级联选择器的第二级选项，并在选择父级后动态更新子级选项的数据源。 例如，假设后端返回的数据格式如下： ``` [ { "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 钩子函数中，初始化父级选项和子级选项的数据源。