el-Cascader级联选择器的使用

效果截图：

结构代码：

          <el-form-item label="所属部门:">
            <el-cascader
              v-model="listQuery.deptId" // 选中项绑定值
              clearable
              placeholder="所属部门"
              :options="deptList" // 放数据的地方
              :props="casProps" // 配置选项
              @change="handlerSearch"
            />
          </el-form-item>

data() {
	    casProps: {
	        checkStrictly: true, // 是否严格的遵守父子节点不互相关联
	        emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
	        value: 'deptId', // 指定选项的值为选项对象的某个属性值
	        label: 'name' // 指定选项标签为选项对象的某个属性值
      },
}

  computed: {
    ...mapGetters(['deptList'])
  },

这里需要重点讲一下对api数据结构的处理
后端返回的api并不是按照层级关系返回的，具体结构如下：

{
    "code": 0,
    "list": [
        {
            "deptId": 1,
            "parentId": 0,
            "name": "广州市公安局",
            "parentName": null,
            "orderNum": 0,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 9,
            "parentId": 1,
            "name": "天河分局",
            "parentName": "广州市公安局",
            "orderNum": 0,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 11,
            "parentId": 9,
            "name": "五山派出所",
            "parentName": "天河分局",
            "orderNum": 0,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 10,
            "parentId": 1,
            "name": "海珠分局",
            "parentName": "广州市公安局",
            "orderNum": 1,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 12,
            "parentId": 9,
            "name": "沙河派出所",
            "parentName": "天河分局",
            "orderNum": 1,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 18,
            "parentId": 11,
            "name": "黄埔派出所",
            "parentName": "五山派出所",
            "orderNum": 1,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        },
        {
            "deptId": 16,
            "parentId": 1,
            "name": "越秀分局",
            "parentName": "广州市公安局",
            "orderNum": 4,
            "open": null,
            "list": null,
            "listUser": null,
            "repositoryIdList": null
        }
    ]
}

所以需要经过递归处理，递归的条件是按照parentId这个字段去进行

  // 部门
  getDeptList({ commit }) {
    return new Promise((resolve, reject) => {
      getDeptList().then(res => {
        if (res?.code !== 0) {
          reject(res.msg)
        } else {
          let deptList = res.list
          console.log(deptList)
          if (deptList && deptList.length >= 1) {
            commit('SET_ORIDEPTLIST', deptList) // 未经递归处理的deptList
            const array = changeDeptList2Tree(0, deptList)
            deptList = array // 经递归处理后的deptList
            commit('SET_DEPTLIST', deptList) // 经过层级处理过的deptList
            resolve({
              deptList
            })
          } else {
            reject('无部门记录')
          }
        }
      })
        .catch(error => {
          reject(error)
        })
    })
  },

function changeDeptList2Tree(parentId, list) {
  // 过滤出parentId是一样的部门
  const array = list.filter(dept => {
    return dept.parentId === parentId
  })
  //   console.log(array, list)
  array.forEach(element => {
    const children = changeDeptList2Tree(element.deptId, list)
    console.log(children)
    if (children && children.length >= 1) {
      element.children = children // element.children为级联选择器中的children
    }
  })
  return array
}

过滤过后的数据结构