Ant Design表单中添加动态属性并使用select组件案列
如下图所示,这个表单页中的专业可以添加多条,在专业的第一个字段使用的是select组件,还要保证每条的数据不相互影响
代码如下:
<template>
<div class="add-mem">
<div class="form-css">
<a-form-model :model="form"
:rules="rules"
ref="ruleForm"
:wrapper-col="{ span: 10 }"
:label-col="{ span: 5 }">
<a-form-model-item label="院系名称" prop="departmentName">
<a-input v-model="form.departmentName" />
<!-- class="form_width" -->
</a-form-model-item>
<a-form-model-item label="*届别" prop="grade">
<a-input v-model="form.grade" placeholder="请输入届别,4位年份数字,如2021" />
</a-form-model-item>
<a-form-model-item label="专业" >
<div class="form_area" v-for="(item, index) in majorArr" :key="index">
<!--<a-input class="m-width" placeholder="专业名称" v-model="item.majorName" /> -- -->
<!-- style="width: 200px" -->
<!-- label-in-value -->
<span class="from-index" v-if="majorArr.length>1">{{index+1}}</span>
<a-select
show-search
:value="item.majorName"
placeholder="专业名称"
class="sp-width"
:default-active-first-option="false"
:show-arrow="false"
:filter-option="false"
:not-found-content="null"
label-in-value
@search="handleSearch"
@focus="handleFocus(index)"
@blur="onBlurSelect"
@change="handleChange"
>
<a-select-option v-for="obj in item.majorNameArr" :key="obj.specialtyCode">
{{ obj.specialtyName }}
</a-select-option>
</a-select>
--
<a-input class="m-width" placeholder="专业代码" v-model="item.majorCode" /> --
--
<!--<a-input class="m-width" placeholder="学历" @change="handleXueLiChange" v-model="item.education" /> -->
<a-select v-model ='item.education' style="width: 90px" >
<a-select-option v-for="(xuli,index) in xueLiOptions" :key="xuli" >
{{xuli}}
</a-select-option>
</a-select>
--
<a-input class="m-width" placeholder="人数" v-model="item.studentNumber" />
<template v-if="!isDisabled">
<a-icon v-if="index === 0" class="create_fq_icon m-left" @click="addField" type="plus-circle" />
<a-icon v-else class="create_fq_icon m-left" @click="deleteField(index)" type="minus-circle" />
</template>
</div>
</a-form-model-item>
<a-form-model-item label="联系人">
<a-input v-model="form.linkMan" />
</a-form-model-item>
<a-form-model-item label="联系电话">
<a-input v-model="form.linkPhone" />
</a-form-model-item>
<a-form-model-item label="院系地址">
<a-input v-model="form.linkPhone" />
</a-form-model-item>
<a-form-model-item label="备注:">
<a-input v-model="form.comment" type="textarea" />
</a-form-model-item>
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">
提交
</a-button>
<a-button style="margin-left: 10px;" @click="doCancel">
取消
</a-button>
</a-form-model-item>
</a-form-model>
</div>
</div>
</template>
<script>
let timeout;
let currentValue;
//
import { doSearchMajorList ,doAddMajorForm} from '@/http/api.js'
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
let param = { name : value}
doSearchMajorList(param).then(res =>{
console.log("res==112", res)
if (currentValue === value) {
const result = res.data.data || [];
callback(result);
}
})
}
timeout = setTimeout(fake, 300);
}
import { mapGetters} from 'vuex'
export default {
name: 'MajorAddPage',
data() {
return {
isDisabled: false,
labelCol: {span: 4},
wrapperCol: {span: 14},
majorArr: [{majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]}],
majorNameArr: [],
majorCodeArr: [],
value: undefined,
majorCode:undefined,
selIndex:'',
form: {
address: '',
comment: '',
departmentName: '',
education: '',
grade: '',
linkMan: '',
linkPhone: '',
majorCode: '',
majorName: undefined,
schoolCode: '',
status: false,
studentNumber: '',
},
xueLiOptions:[],
rules: {
departmentName: [{required: true, message: '请输入院系名称', trigger: 'blur'},
{max: 30, message: '最多输入30个字符', trigger: 'blur'},
],
grade: [{required: true, message: '请输入届别', trigger: 'blur'}],
roles: [{required: true, message: '请输入所属角色', trigger: 'change'}],
},
};
},
computed:{
...mapGetters('login', [
'userInfo'
]),
},
created() {
this.xueLiOptions = this.$store.getters.xueLiOptions
},
methods: {
onSubmit() {
console.log('submit!', this.form);
console.log('submit!majorArr162== ', this.majorArr);
let copyMajorArr = JSON.parse(JSON.stringify(this.majorArr));
if(copyMajorArr && copyMajorArr.length >0){
copyMajorArr.forEach(item =>{
item.majorName = item.majorName.label
})
}
let self = this
self.$refs.ruleForm.validate(valid => {
if (valid) {
self.form.schoolCode = self.userInfo.schoolCode
console.log("提交==",self.form)
self.form.majorList = copyMajorArr;
doAddMajorForm(self.form).then(res =>{
console.log("res===",res)
if(res.data.code == 0){
self.$message.success('添加院系专业成功!')
self.$router.push('/majorSet')
}
})
} else {
}
})
},
doCancel() {
this.$router.go(-1);
},
addField() {
if(this.majorArr.length<20){
this.majorArr.push({majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]})
}else {
this.$message.info('最多添加20个专业!')
}
},
deleteField(index) {
this.majorArr.splice(index, 1)
},
handleSearch(value) {
if (value) {
this.majorArr[this.selIndex].inputName = value
// fetch(value, data => (this.majorNameArr = data));
fetch(value, data => (this.majorArr[this.selIndex].majorNameArr = data));
}
},
handleChange(value) {
// this.value = value;
// this.form.majorName = value;
this.majorArr[this.selIndex].majorName = value
this.majorArr[this.selIndex].majorCode = value.key
// fetch(value, data => (this.majorNameArr = data));
},
onBlurSelect(value) {
if (this.majorArr[this.selIndex].majorNameArr.length>0) {
} else {
if (this.majorArr[this.selIndex].inputName.length >0){
this.majorArr[this.selIndex].majorName = {key: "", label: this.majorArr[this.selIndex].inputName }
}
}
},
handleFocus(val){//传的索引值
this.selIndex = val
},
},
}
</script>
<style scoped lang="less">
.add-mem{
background-color: #FFFFFF;
/*width: 1136px;*/
min-height: 630px;
padding-top: 30px;
padding-bottom: 50px;
.form-css{
.form_width {
width: 468px;
&.field {
width: 217px;
}
}
.sp-width{
width: 160px;
}
.m-width{
width: 88px;
}
.form_area{
width: 668px;
/*border: 1px solid red;*/
margin-bottom: 10px;
.m-left{
margin-left: 16px;
}
}
.create_fq_icon {
font-size: 18px;
vertical-align: middle;
color: #437FFF;
}
.from-index{
display: inline-block;
margin-right: 10px;
}
}
}
</style>