Vue-Ant-Design踩坑之旅

官方网站: https://iczer.gitee.io/vue-antd-admin-docs/
官方文档: https://iczer.gitee.io/vue-antd-admin-docs/start/use.html
其基于的ant design for vue: https://www.antdv.com/docs/vue/introduce-cn/

一、时间选择框

VUE中时间选择框再进行双向绑定的时候，会出现明明绑定的数据是有的，但是就是在页面中不显示的问题。

在网上查找了各种资料，但是就是没有Vue-Ant-Design中<a-date-picker/>的解决方案。

解决方法如下：

<template>
    <div>
        <a-date-picker v-bind:model="date" :default-value="moment(this.date).format('YYYY-MM-DD')" />
    </div>
</template>

<script>
import moment from "moment";
data() {
    return:{
        moment,
        date: 1948914891981, //从后台取到的具体时间（这里是随便写的数字）
    }
},
</script>

将绑定的数据设置到默认值上即可，小伙伴们有更好的解决方案的话，欢迎留言告知

二、级联选择

1、表单中默认值设置后保存，依然表单验证不通过的问题：

## 这样写表单验证不通过
<a-cascader
  v-model="form.nativePlace"
  class="item-r2"
  :default-value="['河南省', '信阳市', '浉河区', '老城街道']"
  :field-names="{label: 'name',value: 'name',children: 'children',}"
  :options="pcasCode"
  placeholder="请选择"
></a-cascader>

原因：不能直接再组件中进行定义默认值，需要再bind的对象上写入默认值才行

解决方案：需要将默认值写入绑定的对象，对象中的默认值不能是字符串，需要是数组格式

## 这样写才可以验证通过，但是form.nativePlace必须是数组类型
<a-cascader
  v-model="form.nativePlace"
  class="item-r2"
  :default-value="form.nativePlace"
  :field-names="{label: 'name',value: 'name',children: 'children',}"
  :options="pcasCode"
  placeholder="请选择"
></a-cascader>

字符串与数组的转换方式如下：

var str = "[11, 22, 33]";
var arrEval = eval(str);
var arrParse = JSON.parse(str);
console.log("arrEval is: " + arrEval);
console.log("arrParse is: " + arrParse);