问题描述：
由于后端返回数据不规范，所有JSON对象都是一级的，渲染出来的科室数据重复了，要改造成这种分级的效果，如果不加以过滤直接渲染，则是这种效果，可以看到内二科重复显示了四次（因为内二科中有四个子科室，但是没有分级，所以后端返回了四条数据）
数据示例：
HasChild: （…）
IsSchedule: （…）
LocationCode: （…）
LocationDesc: （…）
LocationId: "1"
LocationName: "内二科"
LocationPosition: ""
LocationRoom: "呼吸内科"
LocationRoomId: （…）
LocationType: （…）
ParentLocationCode: （…）
ParentLocationId: （…）
显示效果：
解决方案：
那么如何解决呢，首先从数据层面肯定是不行的，因为每一条数据都是唯一的，不可以过滤，否则会影响二级科室数据的完整性，所以只能在显示层面解决。所以打算构建一个新的数组，渲染一级科室的列表，把重复的数据过滤掉，且不影响二级科室的显示。
1.创建一个计算属性 uniqueLocations，用于过滤出唯一的科室名称：
computed: {
uniqueLocations() {
const uniqueNames = [];
const filteredLocations = this.LocationRoomList.filter(item => {
if (!uniqueNames.includes(item.LocationName)) {
uniqueNames.push(item.LocationName);
return true;
}
return false;
});
return filteredLocations;
}
}
在这个计算属性中，我们利用一个数组 uniqueNames 来记录已经出现过的科室名称。对于每个科室项，在判断其科室名称是否已经在 uniqueNames 数组中出现过后，将其添加到 uniqueNames 数组中，并返回 true，表示应该保留该科室项。这样，计算属性的返回值 filteredLocations 就只包含了唯一的科室项。
2. 在左侧导航栏的模板代码中，使用 uniqueLocations 来渲染科室项：
<div class="left">
<van-sidebar v-model="tabValue" @change="onChange">
<van-sidebar-item :title="item.LocationName" v-for="(item, index) in uniqueLocations" :key="index" @click="handleMenulist(item.LocationName, index)" />
</van-sidebar>
</div>
通过以上修改，只会在左侧导航栏中显示一个唯一的科室项，而其他相同名称的科室项将被过滤掉。使用计算属性 uniqueLocations 进行过滤，让左侧导航栏只显示所需的科室项。
