uniapp多级联动复选框

Uniapp多级联动复选框可以通过使用uni-form组件配合v-for指令和computed计算属性实现。以下是一个简单的示例代码：

<template>
  <uni-form>
    <uni-form-item label="选择地区">
      <uni-checkbox-group v-model="selected">
        <uni-checkbox v-for="(province, pIndex) in provinces" :key="pIndex" :label="province.name">
          {{ province.name }}
        </uni-checkbox>
        <uni-checkbox v-for="(city, cIndex) in cities" :key="cIndex" :label="city.name" :disabled="!selected.includes(city.parent)">
          {{ city.name }}
        </uni-checkbox>
        <uni-checkbox v-for="(district, dIndex) in districts" :key="dIndex" :label="district.name" :disabled="!selected.includes(district.parent)">
          {{ district.name }}
        </uni-checkbox>
      </uni-checkbox-group>
    </uni-form-item>
  </uni-form>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      provinces: [
        { name: '北京', code: '110000' },
        { name: '上海', code: '310000' },
        { name: '广东', code: '440000' },
      ],
      cities: [
        { parent: '北京', name: '北京市', code: '110100' },
        { parent: '上海', name: '上海市', code: '310100' },
        { parent: '广东', name: '广州市', code: '440100' },
        { parent: '广东', name: '深圳市', code: '440300' },
        { parent: '广东', name: '珠海市', code: '440400' },
      ],
      districts: [
        { parent: '北京市', name: '东城区', code: '110101' },
        { parent: '北京市', name: '西城区', code: '110102' },
        { parent: '广州市', name: '越秀区', code: '440104' },
        { parent: '广州市', name: '荔湾区', code: '440103' },
        { parent: '深圳市', name: '福田区', code: '440304' },
        { parent: '珠海市', name: '香洲区', code: '440402' },
      ],
    };
  },
  computed: {
    filteredCities() {
      const filteredCities = this.cities.filter(city => this.selected.includes(city.parent));
      return filteredCities;
    },
    filteredDistricts() {
      const filteredDistricts = this.districts.filter(district => this.selected.includes(district.parent));
      return filteredDistricts;
    },
  },
};
</script>

在这个示例中，我们使用了uni-checkbox-group和uni-checkbox组件来实现多级联动复选框。我们将选中的地区存储在selected数组中，然后通过computed计算属性来动态过滤城市和区县数据。当某个城市或区县的parent值（即所属省份）在selected数组中时，才会显示相应的复选框，并且其他复选框会被禁用。这样就可以实现多级联动复选框的效果。