el-cascader级联选择器多级动态选择

项目要进行机构选择，后端给的接口设置了id 与pid也就是本机构id与所属机构的id，所以要逐级查询展示。在机构中又分为直属与非直属，导致机构的层级不定，有两层的，有三层的，效果如下

基于ElementUI版本为2.8.2

image.png

html 部分

<el-cascader
  ref="cascaderAddr"
  class="el-cascader"
  expand-trigger="hover"
  :props="optionProps"
  :options="raw.combination"//对应的数据源
  v-model="combination"
  @active-item-change="handleItemChange"//鼠标悬浮触发方法
>
 </el-cascader>

页面加载时发送请求接收到第一级菜单，并给第一级菜单所有项赋空children

    // 获取组织机构列表
    getCombinationList2: async function () {
      const that = this
      try {
        let paramObj = {
          CODE:'140300'
        }
        // 服务端返回成功
        let result = await GET_REGION_TREE(paramObj)
        that.raw.combination = result.regionOrgTree
        that.raw.combination.map((item, index, array) => {
          // 因为数组和对象更新后不会更新视图，这里必须用$set方法
          this.$set(array[index], 'CHILDREN', [])
        })
      } catch (e) {
        // 服务端返回失败
        this.$message.error(e.message)
      }
    }

@active-item-change="handleItemChange"//鼠标悬浮触发方法
当悬停时，触发方法，进行判断，首先判断此时鼠标的层级，如果为一级继续请求

    //处理一级菜单展示二级菜单
    handleItemChange:async function (val){
      let parentId
      const that = this
      if (val.length === 1) {
        parentId = val[0]
        that.raw.combination.map((item, index) => {
          if (item.CODE === parentId && item.CHILDREN.length === 0) {
            that.handleItemChange2(parentId,index,item);
          }
        })
      }else{
       // 如果点击的是二级分类，则直接将三级分类绑定到platOptions
        parentId = val[1]
        that.raw.combination.map((item, index) => {
          if(item.CHILDREN && item.CHILDREN.length!=0){
            item.CHILDREN.map((innerItem, innerIndex) => {
           if (innerItem.CODE === parentId && innerItem.CHILDREN.length === 0) {
              // 当二级分类的的child为空时才请求一次数据
              that.handleItemChange3(parentId,innerIndex,item);
            }
          })
          }
        })
      }
    },

//处理一级菜单展示二级菜单
    handleItemChange2:async function (parentId,index,item){
      const that = this
      try {
          let paramObj = {
            CODE : parentId
          }
          // 服务端返回成功
          let result = await GET_REGION_TREE(paramObj)
          if(result.regionOrgTree.length!=0){
            that.$set(that.raw.combination[index], 'CHILDREN', result.regionOrgTree)
            item.CHILDREN.map((innerItem, innerIndex) => {
              // 二级分类下必须要设置一个空的child数组，不然点击@active-item-change没反应
              this.$set(item.CHILDREN[innerIndex], 'CHILDREN', [])
            })
          }else{
          //  that.$set(that.raw.combination[index], 'CHILDREN','')
           
          }

        } catch (e) {
          // 服务端返回失败
          this.$message.error(e.message)
        }
    },

    handleItemChange3:async function (parentId,index,item){
      const that = this
      try {
          let paramObj = {
            CODE : parentId
          }
          // 服务端返回成功
          let result = await GET_REGION_TREE(paramObj)
          if(result.regionOrgTree.length!=0){
              this.$set(item.CHILDREN[index], 'CHILDREN', result.regionOrgTree)
          }else{
           this.$set(item.CHILDREN[index], 'CHILDREN', '')
          }

        } catch (e) {
          // 服务端返回失败
          this.$message.error(e.message)
        }
    },

最后编辑于：2019.07.24 20:55:36