ElementUI 使用el-cascader实现组织架构选择查找

前端实现代码如下

    <el-cascader  v-model="ninSearchForm.deptId" :options="DepartmentOrganizeList" :multiple="false"
                       :filterable="true"
                       :show-all-levels="false" :props="csProps">
          </el-cascader>

v-model 绑定的是选择后的数据 

options 是从后端接收到的数据 注意这里需要在后端改成递归的形式

props是设计它的格式

const csProps = ({
  emitPath: false, //只返回改节点的值
  value: 'deptId',// 指定选项的值
  label: 'deptName',// 指定选项标签
  children: 'children' // 指定选项的子选项
})

我们这里后端返回的数据就是这样的格式，这里要相对应

const DepartmentOrganizeList = ref<any[]>([]);

这里再把后端返回的值赋值给它

我们这里后端返回的数据是A公司 然后children 各部门 这样