行政区划选择器异步数据 vue antd

前言

  • 在网上搜索行政区划（省市区）级联选择的时候没有发现数据源是异步请求接口来的（有的例子是是异步但是没有交代设置默认值如何操作 所以自己应公司需求改装了一下）
  • 此组件依赖于ant design of vuehttps://www.antdv.com/components/cascader-cn/

  • 效果


    K8C`A3_9PEZPPS`MBMQBNNL.png

介绍

  • 接口格式
    {
      "id": "1194501203665408001",
      "createBy": "admin",
      "createTime": "2019-11-13 14:24:14",
      "updateBy": null,
      "updateTime": null,
      "sysOrgCode": "A01",
      "hasChild": "0",
      "code": "460101000000",
      "name": "市辖区",
      "pcode": "460100000000",
      "remarks": null,
      "zeroReport": "0"
    },
    {
      "id": "1194501203665408002",
      "createBy": "admin",
      "createTime": "2019-11-13 14:24:14",
      "updateBy": null,
      "updateTime": null,
      "sysOrgCode": "A01",
      "hasChild": "1",
      "code": "460105000000",
      "name": "秀英区",
      "pcode": "460100000000",
      "remarks": null,
      "zeroReport": "0"
    }

通过code 代表自身所在行政区代码 pcode 是上一级代码 haschild 代表是否有下一级（0无 1有）

  • 组件
    首先字段值和cascader要求的对应字段是不一致的 我们需要自定义字段名更多请了解原组件介绍
<template>
  <a-cascader
//数据源
    :options="options"
//选中项改变时触发事件
    @change="onChange"
//在选中当前项的时候做的事情
    :loadData="loadData"
//当前无选中的时候显示的值
    :placeholder="placeholder"
//对应接口字段构建树
    :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
//设置默认值  类似于v-model
    :value="values"
//设置key 用于更新dom
    :key="type"
//选择即改变的关键词
    changeOnSelect
//是否禁用
    :disabled="disabled"
  />
</template>

相应的我们要在data上绑定相应的值

  data() {
    return {
      options: [],
      fieldNames: ['city', 'county', 'township', 'village'],
      values: [],
      type: true
    }
  }

接收项

  props: {
    placeholder: { type: String, default: '请选择' },
    //接收默认值数组与filedNames中的字段对应的值
    defaultvalue: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }

在method中

//此方法只运行一次
    loadfisrtData() {
    //首先先请求第一级的所需数据源
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: 460000000000 } }).then(res => {
        let arr = res.result
        arr.forEach(element => {
        //每一项添加isleaf 
          element.isLeaf = false
        })
//赋值给数据源
        this.options = arr
      })
    },
//选中项改变时触发事件 [460300000000,460300000000,460300000000] 类似这样 选择几级对应长度就有多少
    onChange(arr) {
// 设置默认值
      this.values = [...arr]
// 我的业务需求 每次点击后返回相应的{key：value} 如{city:460300000000,460300000000,460300000000} 这也是设置filedNames的原因
      let obj = {}
      if (arr.length == 0) {
        obj = null
        this.loadfisrtData()
        this.$emit('onChanged', obj)
        return
      }
      const length = arr.length
      // 取出所得数组 最后一位；
      const value = arr[length - 1]
      const key = this.fieldNames[length - 1]
      obj[key] = value
      // 返回最后一位对应结果
      this.$emit('onChanged', obj)
      // 返回对应关系结果
      let newObj = {}
      let nameArray = {}
      let keyarr = [...this.fieldNames]
//数据库中特殊情况 因为个别市的级联只有两级 或者三级（一般为四级）做特别处理
      if (arr[0] == 460300000000 || arr[0] == 460100000000 || arr[0] == 460200000000) {
//取出对应汉字（这个组件没有取出组件上显示的值的方法 所以只能自己从数据源中取 用对应的级联等级的code使用递归取）
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        // {'cityname':'', 'countyname':'', 'townshipname':'', 'villagename':''}
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 4 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      } else if (arr[0] == 460400499000) {
        keyarr.splice(1, 2)
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        // this.getCodeName(nameArray, this.options, 0, keyarr)
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 2 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      } else {
        // let keys = ['city', 'township', 'village']
        //{'cityname':'','townshipname':'', 'villagename':''}
        keyarr.splice(1, 1)
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 3 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      }*/
    },
    loadData(selectedOptions) {
//官方方法 取出当前项
      const targetOption = selectedOptions[selectedOptions.length - 1]
//判断是否还有下一级 
      if (targetOption.hasChild == 0) {
        return
      }
      targetOption.loading = true
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: targetOption.code } }).then(res => {
        targetOption.loading = false
        let arr = res.result
        arr.forEach(element => {
          element.isLeaf = false
        })
        targetOption.children = arr
//重新更新数据源
        this.options = [...this.options]
      })
    }

到这里就已经完成了选择了

  • 根据设置默认值显示组件
    在这边有个坑 这个组件是多个页面公用的 所以不会一直触发生命周期的钩子我们只能去监视默认值的变化 因为有的情景是需要设置默认值（取）有的不用的
  watch: {
    defaultvalue: function(value) {
//过滤掉默认值中的空值 原因就是有的是三级 有的是两级
      this.values = value.filter(ins => {
        return ins !== ''
      })
      this.values.length > 0 && this.setDefault()
    }
  },
  mounted() {
//挂载后执行获取数据源操作
    this.loadfisrtData()
//把props的值给到data上面的值 后面要对values改变props传来的值不推荐直接改变所以使用变量存起来
    this.values = [...this.defaultvalue]
  },

设置默认值到组件上

    setDefault() {
      //   console.log('访问的values', this.values)
//最初的方法  获取到所有的对应级联数据在对静态数据操作 格式转换
      //   let promiseArr = []
      //   this.values.forEach(ins => {
      //     promiseArr.push(
      //       new Promise((resolve, reject) => {
      //         axios.get('/dict/nhDictXzq/getList', { params: { pcode: ins } }).then(res => {
      //           resolve(res.result)
      //         })
      //       })
      //     )
      //   })
      //   Promise.all(promiseArr).then(result => {
      //     console.log('result',JSON.stringify(result))
      //     // 先把result的数据结果集组装
      //     let res = []
      //     this.values.forEach((ins, index) => {
      //       if (index + 1 < this.values.length) {
      //         result.forEach((c, index) => {
      //           let a = c.filter(i => {
      //             return i.code == this.values[index + 1]
      //           })
      //           if (a && a.length > 0) {
      //             a.isLeaf = false
      //             a.loading = false
      //             res.push(a)
      //             // 合并数组
      //             res = Array.prototype.concat.apply([], res)
      //             res = Array.from(new Set(res))
      //           }
      //         })
      //       }
      //     })
      //     for (var i = res.length; i > 0; i--) {
      //       if (res[i]) {
      //         res[i - 1].children = [res[i]]
      //       }
      //     }
      //     res = res[0]
      //     res.isLeaf = false
      //     res.loading = false
      //     let d = this.options.find(ins => {
      //       return ins.code == this.values[0]
      //     })
      //     d && (d.children = [res])
      //     // 更新dom
      //     this.type = !this.type
      //   })
//第二种使用递归方法 直接为他添加children属性
      const p = this.options.find(ins => {
        return ins.code == this.values[0]
      })
      p && this.setChildren(p, 1, this.values, () => {
          // 更新dom
          this.type = !this.type
        })
    },
//parmas  父级 当前层级 传入的默认值 遍历后回调
    setChildren(parent, index, values, cb) {
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: parent.code } }).then(res => {
//结束条件 最后一级是没有子集的
        if (res.result.length == 0) {
          cb()
          return
        }
        parent.children = res.result
        res.result.forEach(ins => {
          ins.isLeaf = false
          ins.loading = false
          if (ins.code === values[index]) {
            index++
            this.setChildren(ins, index, values, cb)
          }
        })
      })
    }

到这里 这个组件就全部都介绍完了 因为是临时做的所以没有做的很通用如果没有理解的可以联系我....

  • 完整的代码
<template>
  <a-cascader
    :options="options"
    @change="onChange"
    :loadData="loadData"
    :placeholder="placeholder"
    :fieldNames="{ label: 'name', value: 'code', children: 'children' }"
    :value="values"
    :key="type"
    changeOnSelect
    :disabled="disabled"
  />
</template>
<script>
import { axios } from '@/utils/request'
export default {
  props: {
    placeholder: { type: String, default: '请选择' },
    defaultvalue: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
      fieldNames: ['city', 'county', 'township', 'village'],
      values: [],
      type: true
    }
  },
  watch: {
    defaultvalue: function(value) {
      this.values = value.filter(ins => {
        return ins !== ''
      })
      this.values.length > 0 && this.setDefault()
    }
  },
  mounted() {
    this.loadfisrtData()
    this.values = [...this.defaultvalue]
  },
  methods: {
    loadfisrtData() {
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: 460000000000 } }).then(res => {
        let arr = res.result
        arr.forEach(element => {
          element.isLeaf = false
        })
        this.options = arr
      })
    },
    onChange(arr) {
      this.values = [...arr]
      let obj = {}
      if (arr.length == 0) {
        obj = null
        this.loadfisrtData()
        this.$emit('onChanged', obj)
        return
      }
      const length = arr.length
      // 取出所得数组 最后一位；
      const value = arr[length - 1]
      const key = this.fieldNames[length - 1]
      obj[key] = value
      // 返回最后一位对应结果
      this.$emit('onChanged', obj)
      // 返回对应关系结果
      let newObj = {}
      let nameArray = {}
      let keyarr = [...this.fieldNames]
      if (arr[0] == 460300000000 || arr[0] == 460100000000 || arr[0] == 460200000000) {
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        // {'cityname':'', 'countyname':'', 'townshipname':'', 'villagename':''}
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 4 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      } else if (arr[0] == 460400499000) {
        keyarr.splice(1, 2)
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        // this.getCodeName(nameArray, this.options, 0, keyarr)
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 2 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      } else {
        // let keys = ['city', 'township', 'village']
        //{'cityname':'','townshipname':'', 'villagename':''}
        keyarr.splice(1, 1)
        this.getCodeName(nameArray, this.options, 0, keyarr, arr)
        keyarr.forEach((ins, index) => {
          newObj[ins] = arr[index]
        })
        arr.length == 3 ? this.$emit('resultCodeArray', { nameArray, newObj }) : this.$emit('resultCodeArray', null)
      }
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      if (targetOption.hasChild == 0) {
        return
      }
      this.finaly = false
      targetOption.loading = true
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: targetOption.code } }).then(res => {
        targetOption.loading = false
        let arr = res.result
        arr.forEach(element => {
          element.isLeaf = false
        })
        targetOption.children = arr
        this.options = [...this.options]
      })
    },
    getCodeName(nameArray, parent, index, values, arr) {
      // console.log('parent',parent)
      let node = parent.find(node => {
        return node.code == arr[index]
      })
      if (node) {
        nameArray[values[index] + 'name'] = node['name']
        if ('children' in node) {
          index++
          this.getCodeName(nameArray, node.children, index, values, arr)
        }
      }
    },
    setDefault() {
      //   console.log('访问的values', this.values)
      //   let promiseArr = []
      //   this.values.forEach(ins => {
      //     promiseArr.push(
      //       new Promise((resolve, reject) => {
      //         axios.get('/dict/nhDictXzq/getList', { params: { pcode: ins } }).then(res => {
      //           resolve(res.result)
      //         })
      //       })
      //     )
      //   })
      //   Promise.all(promiseArr).then(result => {
      //     console.log('result',JSON.stringify(result))
      //     // 先把result的数据结果集组装
      //     let res = []
      //     this.values.forEach((ins, index) => {
      //       if (index + 1 < this.values.length) {
      //         result.forEach((c, index) => {
      //           let a = c.filter(i => {
      //             return i.code == this.values[index + 1]
      //           })
      //           if (a && a.length > 0) {
      //             a.isLeaf = false
      //             a.loading = false
      //             res.push(a)
      //             // 合并数组
      //             res = Array.prototype.concat.apply([], res)
      //             res = Array.from(new Set(res))
      //           }
      //         })
      //       }
      //     })
      //     for (var i = res.length; i > 0; i--) {
      //       if (res[i]) {
      //         res[i - 1].children = [res[i]]
      //       }
      //     }
      //     res = res[0]
      //     res.isLeaf = false
      //     res.loading = false
      //     let d = this.options.find(ins => {
      //       return ins.code == this.values[0]
      //     })
      //     d && (d.children = [res])
      //     // 更新dom
      //     this.type = !this.type
      //   })
      const p = this.options.find(ins => {
        return ins.code == this.values[0]
      })
      p &&
        this.setChildren(p, 1, this.values, () => {
          // 更新dom
          this.type = !this.type
        })
    },
    setChildren(parent, index, values, cb) {
      axios.get('/dict/nhDictXzq/getList', { params: { pcode: parent.code } }).then(res => {
        if (res.result.length == 0) {
          cb()
          return
        }
        parent.children = res.result
        res.result.forEach(ins => {
          ins.isLeaf = false
          ins.loading = false
          if (ins.code === values[index]) {
            index++
            this.setChildren(ins, index, values, cb)
          }
        })
      })
    }
  }
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351