<template>
<div class="conent">
<Modal v-model="classModelshow" :title="compileclass" :mask-closable="false" :closable="false">
<Form :model="classTypeDate" class="mb-10" :label-width="70">
<FormItem label="班级名称" class="mr-10">
<Input v-model="classTypeDate.name" placeholder="请填写项目名称" style="width: 300px"/>
</FormItem>
<FormItem label="班级类型" class="mr-10">
<Select v-model="classTypeDate.typeCode" filterable size="large" style="width: 300px" clearable ref="chlern">
<Option v-for="item in classTypeList" :value="item.code" :key="item.code">{{ item.name }}</Option>
</Select>
</FormItem>
<FormItem label="关联项目" class="mr-10">
<Select v-model="classTypeDate.projectdata" filterable multiple size="large" style="width: 300px" clearable ref="glxm">
<Option v-for="item in projectNameList" :value="item.code" :key="item.code">{{ item.name }}</Option>
</Select>
</FormItem>
<FormItem label="描述">
<Input v-model="classTypeDate.description" style="width: 300px" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
</FormItem>
<FormItem label="状态">
<RadioGroup v-model="classTypeDate.status">
<Radio label="0">禁用</Radio>
<Radio label="1">启用</Radio>
</RadioGroup>
</FormItem>
</Form>
<div slot="footer">
<Button @click="accCance" class="ml-10">取消</Button>
<Button type="primary" @click="accAddamdi">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
export default {
components: {},
props:[‘rechrecord‘],
data() {
return {
classModelshow:true,
compileclass:"新增",
classTypeDate:{
typeCode:[],
projectdata:[],
status:‘0‘,
},
classTypeList:[],
projectNameList:[],
};
},
methods: {
accCance(){
this.classTypeDate = {}
this.$refs.chlern.clearSingleSelect(), this.$refs.glxm.clearSingleSelect()
this.classModelshow = false
},
accAddamdi(){
if((this.classTypeDate.name == null &&this.classTypeDate.name != "") || this.classTypeDate.name.trim() == ""){
this.$alert.error("请输入XXXX")
return
}
if((this.classTypeDate.typeCode == undefined ||this.classTypeDate.typeCode.length =="0" )){
this.$alert.error("请选择XXX")
return
}
if((this.classTypeDate.projectdata == undefined || this.classTypeDate.projectdata.length =="0" )){
this.$alert.error("请选择XXXX")
return
}
if((this.classTypeDate.description == null &&this.classTypeDate.description != "") || this.classTypeDate.description.trim() == ""){
this.$alert.error("请填写XXXX")
return
}
},
},
created() {
},
mounted() {
},
watch:{
rechrecord(val){
this.classTypeDate = JSON.parse(JSON.stringify(val))
// this.classTypeDate.projectdata = val.project.split(",")
}
}
};
</script>
<style scoped>
</style>
ivewui model框 模板
原文：https://www.cnblogs.com/heibin/p/13886000.html
