采用id绑定对象
<el-form-item style="margin-bottom: 0;" label="专题模板" prop="itemTopic" >
<el-select v-model="form.itemTopic.id" filterable placeholder="请选择" @change="onChangeitemTopic">
<el-option
v-for="(item,index) in itemTopic"
:key="item.uuid"
:label="item.fullname"
:value="item.id" />
</el-select>
</el-form-item>
const defaultForm = { itemTopic: { id: null } }
data() {
//加上下拉框验证
const isSelectItemTopic = (rule, value, callback) => {
if (this.form.itemTopic.id === null || this.form.itemTopic.id === '') { //如果值是 null,提示用户选择正确的选项
return callback(new Error("请正确选择专题"));
} else {
callback();
}
}
return {
itemTopic: [],
...
rules: {
itemTopic: [
{ required: true,validator: isSelectItemTopic, message: '专题模板不能为空', trigger: 'input' }
]
}
}
}
onChangeitemTopic(val) {
//查找对象其它属性
let obj = {}
obj = this.itemTopic.find(item => {
return item.id === val
})
//设置隐藏域值
this.form.topicUuid = obj.uuid
},
其它属性通过后台获取,传递给对象数组。
getItemTopicList(catid) {
this.itemTopic = []
getTopicByCategoryId(catid).then( res => {
this.itemTopic = res.content
})
},
// 取专题分类信息,改变专题模块
selectCategory(val){
this.form.itemTopic.id = ''
this.getItemTopicList(val.id)
},
```
打开编辑窗口获取专题信息
initWinform() {
if (this.form.itemMyTopiccategory.id != null) {
this.getSupCategorys(this.form.itemMyTopiccategory.id)
//通过分类信息获取该分类下的专题模块
this.getItemTopicList(this.form.itemMyTopiccategory.id)
} else {
this.getMyCategorys()
}
...
```
注意 prop=“itemTopic” 要与 v-model=“form.itemTopic.id” itemTopic 对应。不然会出现表单验证不通过。