vue+a-form 动态表格,动态增加动态删除
思路借鉴了一位大佬的文章,原文地址如下:版权声明:本文为qq_42203909原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本文链接:antd实现动态增减表单项,支持赋初始值!首先是封装子组件,自己起个名字。v-decorator官网上是这么说的:经过 v-decorator 包装的控件,表单控件会自动添加 value ,数据同步将被 Form 接管,我自己的
思路借鉴了一位大佬的文章,原文地址如下:
版权声明:本文为qq_42203909原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:antd实现动态增减表单项,支持赋初始值!
首先是封装子组件,自己起个名字。
v-decorator官网上是这么说的:经过 v-decorator 包装的控件,表单控件会自动添加 value ,数据同步将被 Form 接管,我自己的理解v-decorator相当于v-model绑的值,只是操作值的方法不一样,v-model可以直接赋值,v-decorator需要用到 this.form.setFieldsValue({}) 方法修改值
1、 通过 v-decorator绑值, ${title}Name[${item}]
,在父组件的子组件标签上会定义title为partOne。相当于给每一项都增加了一个相同的前缀,比如:partOneName[0]
2、initialValue是form表单的默认值
3、a-form可以直接在模板区写校验规则,如果要自定义,可以写 rules: [{ validator: validatorUrl }],在methods中定义validatorUrl 校验方法即可
4、
<template>
<div>
<div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
<div v-for="item in keysList" :key="item">
<a-row :gutter="24">
<a-col :span="12" >
<a-form-item label="xx地址:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" >
<a-input
autocomplete="off"
placeholder="请填写xx地址"
v-decorator="[
`${title}Name[${item}]`,
{
initialValue: arr[item] ? arr[item].name : undefined,
rules: [{ validator: validatorUrl }]
}
]"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item label="xx:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
<a-input
autocomplete="off"
placeholder="请填写xx"
v-decorator="[
`${title}Age[${item}]`,
{
initialValue: arr[item] ? arr[item].age : undefined,
rules: [{ validator: validatorPort }]
}
]"
/>
</a-form-item>
</a-col>
<a-col :span="2" style="padding-left: 0px">
<a-form-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
<template v-if="item === id">
<a-button type="dashed" icon="plus" @click="addRow(item)" class="addRowBtn"></a-button>
</template>
<template v-else>
<a-button type="dashed" icon="minus" @click="removeRow(item)" class="minusRowBtn"></a-button>
</template>
</a-form-item>
</a-col>
</a-row>
</div>
<a-row>
<a-col :span="23">
<a-form-item label="xx" :labelCol="{ span: 3 }" :wrapperCol="{ span: 19 }">
<a-input
autocomplete="off"
placeholder="请输入xx名称,如: Topic"
v-decorator="[
`${title}topic`,
{
initialValue: arr['partOnetopic'],
rules: [{ validator: validatorTopic }],
validateTrigger: []
}
]"
/>
</a-form-item>
</a-col>
</a-row>
</div>
</div>
</template>
<script>
export default {
name: 'DynamicForm',
props: {
title: {
type: String,
default: ''
},
wrapHeight: {
// 表单容器的高度
type: Number,
default: 120
},
arr: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
id: 0,
keysList: []
}
},
created() {
this.form = this.$form.createForm(this)//创建form表单
this.init()
},
methods: {
// 初始化
init() {
const arr = [0]
if (this.arr[0].partOneName.length !== 0) {
// console.log('this.arr[0].partOneName.length', this.arr[0].partOneName.length);
for (let i = 1; i < this.arr[0].partOneName.length; i++) {
arr.push(i)
this.id = this.id + 1//通过id自加的方式增加form表单
}
}
this.keysList = arr
},
// 移除某行
removeRow(k) {
if (this.keysList.length === 1) {
// 如果存在可以移除所有行的情况,把条件改为this.keysList.length === 0即可
return
}
this.keysList = this.keysList.filter(item => item !== k)
},
// 新增一行
addRow() {
if (this.keysList.length < 6) {//需求需要限制为只能增加6行,如果无线增加,可以去掉条件
this.id = this.id + 1
this.keysList = this.keysList.concat(this.id)
} else {
this.$message.error('新增不可以超过6行!')
}
},
// 验证xx正则
validatorPort(rule, value, callback) {
if (value) {
if (!/^\d{2,5}$/.test(value)) {
callback(new Error('请输入正确的xx'))
} else {
callback()
}
} else {
callback()
}
},
}
</script>
<style lang="less" scoped>
.dynamic-wrap {
padding-top: 10px;
background-color: white;
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background: #d8d8d8;
border-radius: 10px;
}
&::-webkit-scrollbar-track-piece {
background: transparent;
}
}
.minusRowBtn {
color: #f5222d;
background: #fff1f0;
border-color: #ffa39e;
padding-right: 7px;
padding-left: 7px;
height: 29px;
margin-left: 10px;
}
.addRowBtn {
// width: 70%;
color: #1890ff;
border-color: #91d5ff;
background: #d2e4ee;
padding-right: 7px;
padding-left: 7px;
height: 29px;
margin-left: 10px;
// margin: 0px 0px 20px 70px;
}
/deep/ .ant-form-item-label{
&::before{
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
}
}
</style>
然后在父组件中引入并使用
import DynamicForm from './kafkaForm.vue'
const PARTONE = 'partOne'
export default {
components: { DynamicForm },
data() {
return {
arr: [
// 模拟从接口获取到的数据(如编辑场景)
{ partOneName: [], partOneAge: [], partOnetopic: '' }
],
PARTONE,
Kafkaform: this.$form.createForm(this),
}
},
模板区:
<a-form :form="Kafkaform" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" >
<dynamic-form :title="`${PARTONE}`" :wrapHeight="360" :arr="arr" />
</a-form>
方法中:
方法里的代码不太好贴,这个要根据你实际情况来获取值,以下代码仅供参考
this.arr[0].partOneName = this.firstAddress
this.arr[0].partOneAge = this.lastAddress
setTimeout(() => {
this.Kafkaform.setFieldsValue({ partOnetopic: Lastkafkaurl })
this.Kafkaform.setFieldsValue({ partOneAge: this.arr[0].partOneAge })
this.Kafkaform.setFieldsValue({ partOneName: this.arr[0].partOneName })
}, 0)
基本上就是这样了,有问题可以私信我,看到会及时回复你
更多推荐
所有评论(0)