【Antdesignvue】antd实现动态增减表单项，⽀持赋初始值
封装组件
基于官⽹最朴实⽆华的例⼦，做了⼀下延伸。封装的组件，⽀持⼀下功能：
⼀⾏可有多个表单项
表单项可赋初始值（如：应⽤在编辑场景！）
可在⼀个页⾯上多次复⽤该组件！
<template>
<div>
<div class="dynamic-wrap">
<div v-for="item in keysList" :key="item">
<a-row :gutter="24">
<a-col :xs="24" :sm="12">
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请填写姓名"
v-decorator="[
`${title}Name[${item}]`,
{
initialValue: arr[item] ? arr[item].name : undefined,
rules: [margin属性值可以为百分比
{
required: true,
pattern: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\u                        message: '请填写正确的姓名!'
}
]
}
]"
:maxlength="64"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="出⽣⽇期" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-date-picker
placeholder="请选择出⽣⽇期"
v-decorator="[
`${title}Birthday[${item}]`,
{
initialValue: arr[item] ? moment(arr[item].birthday, 'YYYY-MM-DD') : null,
rules: [{ required: true, message: '请选择出⽣⽇期!' }]
}
]"
/>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="国籍" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-select
placeholder="请选择国籍"
type="list"
show-search
:filter-option="filterOption"
v-decorator="[
`${title}Country[${item}]`,
{
initialValue: arr[item] ? arr[item].country : undefined,
rules: [{ required: true, message: '请选择国籍!' }]
}
]"
>
>
<a-select-option v-for="(item, index) in allCountry" :key="de">
{{ itemFullName }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="⾝份证号" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请填写⾝份证号"
v-decorator="[
`${title}IdNumber[${item}]`,
{
initialValue: arr[item] ? arr[item].idNumber : undefined,
rules: [
{
required: true,
pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,                        message: '请填写⾝份证号!'
}
]
}
]"
:maxlength="18"
/>
</a-form-item>
</a-col>
<div v-if="hasAddress">
<a-col :xs="24" :sm="12">
<a-form-item label="住址" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
v-decorator="[
`${title}Address[${item}]`,
{
initialValue: arr[item] ? arr[item].address : undefined,
rules: [
{
required: true,
message: '请输⼊住址'
}
]
}
]"
placeholder=""
:
maxlength="128"
/>
</a-form-item>
</a-col>
</div>
<div v-else>
<a-col :xs="24" :sm="12">
<a-form-item label="股权百分⽐(%)" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请填写股权百分⽐(%)"
v-decorator="[
`${title}EquityPercentage[${item}]`,
{
initialValue: arr[item] ? arr[item].equityPercentage : undefined,
rules: [{ required: true, pattern: /^\d{1,}$/, message: '请填写正确的股权百分⽐(%)!' }]
}
]"
:maxlength="3"
/>
</a-form-item>
</a-col>
</div>
<a-col :xs="24" :sm="24" :offset="3">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-button
type="danger"
ghost
class="deleteRowBtn"
v-if="keysList.length > 1"
@click="() => removeRow(item)"
icon="delete"
>
删除
</a-button>
</a-form-item>
</a-col>
</a-row>
</div>
<a-row>
<a-col :xs="24" :sm="24" :offset="3">
<a-form-item>
<a-button type="dashed" class="addRowBtn" @click="addRow" icon="plus">新增</a-button>          </a-form-item>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
import moment from 'moment'
import { AllCOUNTRY } from './country-constant'
export default {
name: 'DynamicForm',
props: {
title: {
type: String,
default: ''
},
hasAddress: {
type: Boolean,
default: false
},
arr: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
allCountry: AllCOUNTRY,
id: 0,
keysList: [],
moment
}
},
created() {
this.form = this.$ateForm(this)
this.init()
},
methods: {
// 初始化
init() {
const arr = [0]
if (this.arr.length !== 0) {
for (let i = 1; i < this.arr.length; i++) {
arr.push(i)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。