今天遇到个需求，需要在选择一个内容后填充其他信息到级联选择器中。记录一下。
首先看一下级联选择器的基本用法：
<template><a-cascader :options="options" placeholder="Please select" @change="onChange" /></template><script>export default {data() {return {options: [{value: 'zhejiang',label: 'Zhejiang',children: [{value: 'hangzhou',label: 'Hangzhou',children: [{value: 'xihu',label: 'West Lake',},],},],},{value: 'jiangsu',label: 'Jiangsu',children: [{value: 'nanjing',label: 'Nanjing',children: [{value: 'zhonghuamen',label: 'Zhong Hua Men',},],},],},],};},methods: {onChange(value) {console.log(value);},},};</script>
想要在选择的同时改变值的话，只需要加入change-on-select这个属性，如下：
<template><a-cascader :options="options" change-on-select @change="onChange" /></template>
接着就是如何选择内容填充到级联选择器中，有一种是直接给v-model的值进行赋值。还有一种就是通过this.form.setFieldsValue({})进行赋值。最重要的是赋的值要与原本级联选择器导出的数据相同格式。
<template><a-cascader :fieldNames="{label: 'name',value: 'id',children: 'children',}" v-model="demo" :options="options" change-on-select @change="onChange" /><a-button type="primary" @click="setDemo">点我赋值</a-button></template><script>export default {data() {return {options: [value:1,name:'parent',children:[...]],demo:[]};},methods: {onChange(value) {console.log(value);},setDemo(){this.demo = ['1','2']}},};</script>
这里展示了自定义变量名的方法，就是定义以下内容就行。name、id、children都是我自定义的
:fieldNames="{label: 'name',value: 'id',children: 'children'}"
接着是this.form.setFieldsValue({})，这个是当你不使用v-model而是使用v-decorator的情况下使用。常与this.form.validateFields((err,formData){}配合使用
<template><a-cascader :fieldNames="{label: 'name',value: 'id',children: 'children',}" v-decorator="['demo',{rules: [{ required: true, message: 'demo不能为空' }],},]" :options="options" change-on-select @change="onChange" /><a-button type="primary" @click="setDemo">点我赋值</a-button></template><script>export default {data() {return {form: this.$form.createForm(this),options: [value:1,name:'parent',children:[...]]};},methods: {onChange(value) {console.log(value);},setDemo(){this.$nextTick(()=>{this.form.setFieldsValue({demo:['1','2'.....]})})}},};</script>
