uni-app 三级联动多选改为二级联动

在uni-app中实现三级联动多选改为二级联动，通常涉及调整数据结构和处理逻辑。以下是一个简化的代码示例，展示如何从三级联动多选改为二级联动。

原始三级联动多选示例（伪代码）

假设我们有一个三级联动的数据结构，如下所示：

const data = [
  {
    id: 1,
    name: '一级1',
    children: [
      {
        id: 11,
        name: '二级1-1',
        children: [
          { id: 111, name: '三级1-1-1' },
          { id: 112, name: '三级1-1-2' }
        ]
      },
      {
        id: 12,
        name: '二级1-2',
        children: [
          { id: 121, name: '三级1-2-1' },
          { id: 122, name: '三级1-2-2' }
        ]
      }
    ]
  },
  // 更多一级分类...
];

修改为二级联动

为了简化为二级联动，我们需要移除第三级数据，并调整选择逻辑。下面是修改后的数据结构：

const data = [
  {
    id: 1,
    name: '一级1',
    children: [
      { id: 11, name: '二级1-1' },
      { id: 12, name: '二级1-2' }
    ]
  },
  // 更多一级分类...
];

实现二级联动选择

在页面中，我们使用两个picker组件来实现二级联动：

<template>
  <view>
    <picker mode="selector" :range="level1" @change="onLevel1Change">
      <view>{{ selectedLevel1Name }}</view>
    </picker>
    <picker mode="selector" :range="level2" @change="onLevel2Change">
      <view>{{ selectedLevel2Name }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data,
      level1: [],
      level2: [],
      selectedLevel1Index: 0,
      selectedLevel2Index: 0,
      selectedLevel1Name: '',
      selectedLevel2Name: ''
    };
  },
  mounted() {
    this.level1 = this.data.map(item => item.name);
    this.updateLevel2(0);
  },
  methods: {
    onLevel1Change(e) {
      this.selectedLevel1Index = e.detail.value;
      this.updateLevel2(this.selectedLevel1Index);
    },
    onLevel2Change(e) {
      this.selectedLevel2Index = e.detail.value;
      this.selectedLevel2Name = this.level2[this.selectedLevel2Index];
    },
    updateLevel2(index) {
      this.level2 = this.data[index].children.map(item => item.name);
      this.selectedLevel2Name = this.level2[0]; // 默认选中第一个
    }
  }
};
</script>

在这个示例中，我们使用了两个picker组件分别表示一级和二级联动。当一级选择变化时，我们更新二级选项列表。这个示例展示了如何从三级联动多选结构简化为二级联动，并实现了基本的选择功能。