Ant Design Vue 中cascader级联组件动态加载数据

前言

Ant Design Vue中的cascader是专门处理级联数据的组件，使用非常简单。但在动态获取数据并回显数据方面，略有不足，无法实现回显数据前加载二级数据。需要自己编写代码来实现。

如何使用组件

引入组件

默认框架没有引用Cascader组件，需要自己手动引用，引用方式：
打开/src/core/lazy_use.js，

import {
  ...
  Cascader
} from 'ant-design-vue'

...

Vue.use(Cascader)

这样在Vue页面上就能直接使用<a-cascader />标签了

如何动态加载数据

需求

需要在页面上实现省市区的动态级联，并且在编辑时回显数据

具体实现

html代码：

<a-form-item label="所在地" :labelCol="labelCol" :wrapperCol="wrapperCol">
  <a-cascader
    :options="provinceOptions"
    :load-data="loadCityData"
    :field-names="{label: 'name', value: 'id', children: 'children' }"
    placeholder="请选择所在地"
    v-decorator="['bank_province', { rules: [{required: true, message: '请选择所在地'}] }]"
    change-on-select
  />
</a-form-item>

属性说明：

// 初始化省份数据
:options="provinceOptions"

// 加载数据时执行的方法
:load-data="loadCityData"

// 自定义的标题显示、对应ID、子级内容字段
:field-names="{label: 'name', value: 'id', children: 'children' }"

data代码：

// 就一个数组完事
provinceOptions: [],

script代码：

初次进入页面时需要先加载省份数据，那么我们需要在created方法中实现：

created() {
    // 初始化加载省份数据
    // getAreaList是我这边用axios调用后端接口的方法
    // 第一个参数是pid，0是指对顶层数据，即是省份数据，如果是其他值则是获取城市数据
    // 第二个参数是回调函数
    getAreaList(0, (res, status) => {
      if (status) {
        var array = []
        res.map((item, index) => {
          // level是层级，1代表省份
          array.push(Object.assign(item, { isLeaf: !(item.level == 1) }))
        })
        this.provinceOptions = array
      }
    })
}

method相关函数

    // 省市级联加载数据（第一次选择更改时会触发此函数，已加载过的不会再次触发）
    loadCityData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      // 加载标识
      targetOption.loading = true
      console.log('selectedOptions', selectedOptions)
      console.log('targetOption', targetOption)
      
      // 选择省份、城市时获取下级数据
      this.doLoadCityData(targetOption.id, (array) => {
        console.log('...targetOption', targetOption)
        // 取消加载标识
        targetOption.loading = false
        // 把下级数据存进去
        targetOption.children = array
        // 重新赋值级联数据
        this.provinceOptions = [...this.provinceOptions]
      })
    },

    // 处理加载城市下级数据（选择、编辑时可用）
    doLoadCityData(pid, callback = null) {
      getAreaList(pid, (res, status) => {
        if (status) {
          // 子级数据装到array中
          var array = []
          res.map((item, index) => {
            array.push(Object.assign(item, { isLeaf: !(item.level == 1) }))
          })
          
          // 再传给回调函数
          if (callback) {
            callback(array)
          }
        }
      })
    },

这样就完成了二级级联动态数据加载。

如何回显数据

实现思路是：
1.在获取到model数据后，对其进行监听，一级省份数据对其赋值；
2.如果二级城市数据有值的情况下，先获取一级省份的下级数据，再进行二级城市数据赋值

具体实现代码如下：

created() {
  ...
  // 防止表单未注册
  fields.forEach((v) => this.form.getFieldDecorator(v))
  ...
  // 监听
  this.$watch('record', () => {
    ...
    // 开户银行所在地处理
    if (this.record.bank_province) {
      this.doLoadCityData(this.record.bank_province, (array) => {
        this.form.setFieldsValue({ bank_province: [this.record.bank_province, this.record.bank_city] })

        // 设置城市显示
        if (this.record.bank_city) {
          this.provinceOptions.forEach((value, index) => {
            if (value.id == this.record.bank_province) {
              console.log('this.record.bank_province', this.record.bank_province)
              var obj = this.provinceOptions[index]
              obj.children = array
              this.provinceOptions[index].children = array
              this.provinceOptions = [...this.provinceOptions]
              this.form.setFieldsValue({ bank_province: [this.record.bank_province, this.record.bank_city] })
              return
            }
          })
        }
      })
    }
  });
}