前言
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
}
})
}
})
}
});
}
ant design vue Cascader级联选择清空重置
在使用ant design vuecader 级联选择器时想通过按钮来实现清空 选择器内已选择的数据。
<!-- 给 a-cascader 加上 ref 标识 通过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 就是目前选中的数组
this.$refs.cascader.sValue = []
},
}
}
</script>
