官方网站: 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);