前端vue+elementUI新增页面的一些注意点
<el-form-item prop="collegeId" label="所属院"> <el-select v-model="dataForm.collegeId" placeholder="请选择所属院"> <el-option v-for="college in collegeList" :key="college.id" :label="college.collegeName" :value="college.id"></el-option> </el-select> </el-form-item>
绑定数据
export default {
data () {
return {
visible: false,
collegeList: [],
dataForm: {
id: '',
departmentName: '',
collegeId: '',
sort: '',
addTime: ''
}
}
},
验证必填
computed: {
dataRule () {
return {
id: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
departmentName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
collegeId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
addTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
初始化:
methods: {
init () {
this.visible = true
this.dataForm.collegeId = ''
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getCollgeList()
if (this.dataForm.id) {
this.getInfo()
}
})
},
对应的方法:
getCollgeList () {
return this.$http.get('/test/college/list').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.collegeList = res.data
}).catch(() => {})
},