ant-desgin-vue-pro a-cascader 级联选择框使用

1.先看效果

2.写法

1.标签

      <a-form-item label="选择业务">
        <a-cascader v-decorator="['bizArray', {rules: [{required: true}]}]" :options="bizSelectData" @change="onChangeBiz" placeholder="请选择业务" :fieldNames="fieldNames"/>
      </a-form-item>

2.定义data里的自定义字段

//自定义级联框的字段格式
const fieldNames = {'value':'value','label':'label','children':'children'};

  data () {
    this.fieldNames = fieldNames;
    return {
      bizSelectData: [],//业务下拉框数据
    }
  },

3.初始化加载数据

created () {
    //请求后端数据
    this.$http.post('/xxx/getBiz')
      .then(res => {
        this.bizSelectData = res;
      });
  },

4.后端需要返回的数据格式

const bizSelectData = [
    {
        value: 'zhejiang',
        label: '浙江省',
        children: [
            {
                value: 'hangzhou',
                label: '杭州市',
                children: [
                    {
                        value: 'xihu',
                        label: '西湖区',
                        
                    },
                    
                ],
                
            },
            
        ],
        
    },
    {
        value: 'shanghai',
        label: '上海市',
        disabled: true,
        //禁用选择children: [
            {
                value: 'qingpuqu',
                label: '青浦区',
                children: [
                    {
                        value: 'beijinglu',
                        label: '北京路',
                        
                    },
                    
                ],
                
            },
            
        ],
        
    },
    
]

3.修改数据回显

1.先看数据格式

2.在看回显的关键代码

// 表单字段
const fields = ['id','projectId','bizArray'];

  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      let data = pick(this.model, fields);
      console.log('回显模态框',data)
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    });
    //请求后端数据
    this.$http.post('/rowsAccess/getBiz')
      .then(res => {
        this.bizSelectData = res;
      });
  },

3.如何给表单传值?

1.按钮事件

<a @click="handleEditModal(record)">修改</a>

2.事件函数

methods: {
  handleEditModal(record){
    this.visibleRowsAccessForm = true;
    //设置级联框回显
    record.bizArray = [record.groupCode,record.itemCode];
    this.rowsAccessFormModal = { ...record }
  },
}

3.后端响应数据