前言

Ant Design Vue中的cascader是專門處理級聯(lián)數(shù)據(jù)的組件，使用非常簡單。但在動態(tài)獲取數(shù)據(jù)并回顯數(shù)據(jù)方面，略有不足，無法實現(xiàn)回顯數(shù)據(jù)前加載二級數(shù)據(jù)。需要自己編寫代碼來實現(xiàn)。

如何使用組件

引入組件

默認(rèn)框架沒有引用Cascader組件，需要自己手動引用，引用方式：
打開/src/core/lazy_use.js，

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

...

Vue.use(Cascader)

這樣在Vue頁面上就能直接使用<a-cascader />標(biāo)簽了

如何動態(tài)加載數(shù)據(jù)需求

需要在頁面上實現(xiàn)省市區(qū)的動態(tài)級聯(lián)，并且在編輯時回顯數(shù)據(jù)

具體實現(xiàn)

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>

屬性說明：

// 初始化省份數(shù)據(jù)
:options="provinceOptions"

// 加載數(shù)據(jù)時執(zhí)行的方法
:load-data="loadCityData"

// 自定義的標(biāo)題顯示、對應(yīng)ID、子級內(nèi)容字段
:field-names="{label: 'name', value: 'id', children: 'children' }"

data代碼：

// 就一個數(shù)組完事
provinceOptions: [],

script代碼：

初次進(jìn)入頁面時需要先加載省份數(shù)據(jù)，那么我們需要在created方法中實現(xiàn)：

created() {
    // 初始化加載省份數(shù)據(jù)
    // getAreaList是我這邊用axios調(diào)用后端接口的方法
    // 第一個參數(shù)是pid，0是指對頂層數(shù)據(jù)，即是省份數(shù)據(jù)，如果是其他值則是獲取城市數(shù)據(jù)
    // 第二個參數(shù)是回調(diào)函數(shù)
    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相關(guān)函數(shù)

    // 省市級聯(lián)加載數(shù)據(jù)（第一次選擇更改時會觸發(fā)此函數(shù)，已加載過的不會再次觸發(fā)）
    loadCityData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      // 加載標(biāo)識
      targetOption.loading = true
      console.log('selectedOptions', selectedOptions)
      console.log('targetOption', targetOption)
      
      // 選擇省份、城市時獲取下級數(shù)據(jù)
      this.doLoadCityData(targetOption.id, (array) => {
        console.log('...targetOption', targetOption)
        // 取消加載標(biāo)識
        targetOption.loading = false
        // 把下級數(shù)據(jù)存進(jìn)去
        targetOption.children = array
        // 重新賦值級聯(lián)數(shù)據(jù)
        this.provinceOptions = [...this.provinceOptions]
      })
    },

    // 處理加載城市下級數(shù)據(jù)（選擇、編輯時可用）
    doLoadCityData(pid, callback = null) {
      getAreaList(pid, (res, status) => {
        if (status) {
          // 子級數(shù)據(jù)裝到array中
          var array = []
          res.map((item, index) => {
            array.push(Object.assign(item, { isLeaf: !(item.level == 1) }))
          })
          
          // 再傳給回調(diào)函數(shù)
          if (callback) {
            callback(array)
          }
        }
      })
    },

這樣就完成了二級級聯(lián)動態(tài)數(shù)據(jù)加載。

如何回顯數(shù)據(jù)

實現(xiàn)思路是：
1.在獲取到model數(shù)據(jù)后，對其進(jìn)行監(jiān)聽，一級省份數(shù)據(jù)對其賦值；
2.如果二級城市數(shù)據(jù)有值的情況下，先獲取一級省份的下級數(shù)據(jù)，再進(jìn)行二級城市數(shù)據(jù)賦值

具體實現(xiàn)代碼如下：

created() {
  ...
  // 防止表單未注冊
  fields.forEach((v) => this.form.getFieldDecorator(v))
  ...
  // 監(jiān)聽
  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] })

        // 設(shè)置城市顯示
        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
            }
          })
        }
      })
    }
  });
}

ant design vue Cascader級聯(lián)選擇清空重置

在使用ant design vuecader 級聯(lián)選擇器時想通過按鈕來實現(xiàn)清空 選擇器內(nèi)已選擇的數(shù)據(jù)。

<!-- 給 a-cascader 加上 ref 標(biāo)識 通過ref鏈清空選擇項-->
<template>

    <a-cascader ref="cascader" placeholder="請選擇" :options="assetsClassList" change-on-select/>

    <a-button type="primary" @click="Reset" icon="reload">重置</a-button>

</template>

<script>
        export default {
            methods: {
                Reset() {
                    //sValue 就是目前選中的數(shù)組
                    this.$refs.cascader.sValue = []
                },
            }
        }
</script>