uniapp多级联动复选框实现公司->部门->用户多级联动复选

实现公司->部门->用户多级联动复选框，可以根据上面的示例进行修改。以下是一个简单的示例代码：

<template>
  <uni-form>
    <uni-form-item label="选择公司">
      <uni-checkbox-group v-model="selectedCompanies">
        <uni-checkbox v-for="(company, cIndex) in companies" :key="cIndex" :label="company.name">
          {{ company.name }}
        </uni-checkbox>
      </uni-checkbox-group>
    </uni-form-item>
    <uni-form-item label="选择部门">
      <uni-checkbox-group v-model="selectedDepartments">
        <uni-checkbox v-for="(department, dIndex) in filteredDepartments" :key="dIndex" :label="department.name"
          :disabled="!selectedCompanies.includes(department.parent)">
          {{ department.name }}
        </uni-checkbox>
      </uni-checkbox-group>
    </uni-form-item>
    <uni-form-item label="选择用户">
      <uni-checkbox-group v-model="selectedUsers">
        <uni-checkbox v-for="(user, uIndex) in filteredUsers" :key="uIndex" :label="user.name"
          :disabled="!selectedDepartments.includes(user.parent)">
          {{ user.name }}
        </uni-checkbox>
      </uni-checkbox-group>
    </uni-form-item>
  </uni-form>
</template>

<script>
export default {
  data() {
    return {
      selectedCompanies: [],
      selectedDepartments: [],
      selectedUsers: [],
      companies: [
        { name: '公司A', id: '1' },
        { name: '公司B', id: '2' },
        { name: '公司C', id: '3' },
      ],
      departments: [
        { parent: '公司A', name: '部门A1', id: '11' },
        { parent: '公司A', name: '部门A2', id: '12' },
        { parent: '公司B', name: '部门B1', id: '21' },
        { parent: '公司C', name: '部门C1', id: '31' },
        { parent: '公司C', name: '部门C2', id: '32' },
      ],
      users: [
        { parent: '部门A1', name: '用户A11', id: '111' },
        { parent: '部门A1', name: '用户A12', id: '112' },
        { parent: '部门A2', name: '用户A21', id: '121' },
        { parent: '部门B1', name: '用户B11', id: '211' },
        { parent: '部门C1', name: '用户C11', id: '311' },
        { parent: '部门C2', name: '用户C21', id: '321' },
      ],
    };
  },
  computed: {
    filteredDepartments() {
      const filteredDepartments = this.departments.filter(department => this.selectedCompanies.includes(department.parent));
      return filteredDepartments;
    },
    filteredUsers() {
      const filteredUsers = this.users.filter(user => this.selectedDepartments.includes(user.parent));
      return filteredUsers;
    },
  },
};
</script>

在这个示例中，我们定义了三个选项组（选择公司、选择部门、选择用户），分别对应公司、部门、用户三个级别。我们将选中的公司、部门、用户存储在selectedCompanies、selectedDepartments、selectedUsers数组中，然后通过computed计算属性来动态过滤部门和用户数据。当某个部门或用户的parent值（即所属公司或部门）在selectedCompanies或selectedDepartments数组中时，才会显示相应的复选框，并且其他复选框会被禁用。这样就可以实现公司->部门->用户三级联动复选框的效果。