最近一个项目用了 Ant Design Vue ,我也不知道为啥用这个。。。FORM表单验证踩地坑简直是让我哭哭哭
以前用elementUI,Iview,很顺手,v-model简直是标配
可是这个Ant Design Vue 在需要验证的时候 不能用 v-model
,用v-decoration
。
贴代码 如下
<style lang="less">
@import 'sourceManage';
</style>
<template>
<div ref="sourceManage">
<a-row :gutter="24">
<a-col :sm="12" :md="8" :xl="8">
<h3>
所属类目:
<span>{
{databaseType}}</span>
</h3>
</a-col>
<a-col :sm="12" :md="3" :xl="3" :offset="11">
<a-button type="primary" icon="plus" @click="showSourseForm">添加源</a-button>
</a-col>
</a-row>
<a-row :gutter="24" style="margin-top:30px;" v-if="databaseInformation.length">
<a-col :sm="12" :md="8" :xl="8" :style="{ marginBottom: '24px' }" v-for = "(databaseInfo,key) in databaseInformation" :key="key" >
<a-card class="datatop">
<a-icon type="check-circle" style="fontSize:16px;color:red" v-if="false"/>
<a-icon type="close-circle" style="fontSize:16px;color:blue" />
<span style="margin-left:100px;font-size:16px"><strong>information {
{key+1}}</strong></span>
</a-card>
<a-card class="datacontent">
<a-row>
<a-col :span="4"> <a-icon type="database" theme="twoTone" style="fontSize:50px;color:blue;margin-top:10px" /></a-col>
<a-col :span="10">
<p><strong>库名称:</strong>{
{databaseInfo.connectionName}}</p>
<p><strong>IP:</strong>{
{databaseInfo.databaseIp}}</p>
<p><strong>描述: </strong>{
{databaseInfo.databaseDescript || '无'}}</p>
</a-col>
<a-col :span="9" :offset="1">
<p> <strong>类型:&