效果图:
组件vue文件:
Select.vue
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" style="width: 200px" />
</el-form-item>
<el-form-item label="活动美食" prop="foods">
<el-select v-model="form.foods" multiple placeholder="请选择" style="width: 200px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Select',
props: {
formP: {
type: Object,
default: () => {}
}
},
data() {
return {
form: { foods: [], name: null },
options: [
{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}
],
rules: {
name: [
{ required: true, message: '请选择活动名称', trigger: ['change'] }
],
foods: [
{ required: true, message: '请选择活动美食', trigger: ['change'] }
]
}
}
},
watch: {
formP: {
handler(val) {
this.form = val
},
deep: true
// immediate: true
}
},
methods: {
reset() {
this.$refs['form'].resetFields()
},
cancel() {
this.reset()
this.$emit('close')
},
submit() {
this.$refs['form'].validate((valid) => {
// 表单校验通过后,需要执行的代码
})
}
}
}
</script>
<style scoped>
</style>
父级使用:
<el-button type="success" @click="open('add')">新增</el-button>
<el-button type="primary" @click="open('edit')">编辑</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
>
<select-com ref="selectCom" :form-p="form" @close="close" />
<span slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitOk">确 定</el-button>
</span>
</el-dialog>
import SelectCom from './components/Select'
components: { SelectCom },
data() {
return {
form: {},
dialogVisible: false
}
},
methods: {
close() {
this.dialogVisible = false
this.$refs['selectCom'].reset()
},
submitOk() {
this.$refs['selectCom'].submit()
},
open(type) {
this.dialogVisible = true
this.$nextTick(() => {
if (type == 'add') {
this.form = { foods: [], name: null }
} else { // edit
this.form = {
foods: ['选项一'],
name: 'yyx'
}
}
})
}
}