1.代码
<template><a-modal v-model="visible" title="Demo示例" @cancel="handleCancel"><!-- 处理时间 --><div class="contentblock"><span class="title"><span style="color: red">*</span>时间:</span><a-date-picker v-model="formData.processingTime" placeholder="请选择处理时间" show-time format="YYYY-MM-DD HH:mm:ss" :allow-clear="false" class="input"/></div><!-- 处理内容 --><div class="contentblock"><span class="title"><span style="color: red">*</span>内容:</span><a-textarea v-model="formData.processingContent" placeholder="请输入处理内容" class="input" /></div><!-- 单选下拉框 --><div class="contentblock"><span class="title">类别:</span><a-select v-model="formData.singleSelect" :placeholder="placeholder" class="input"><a-select-option v-for="(option, index) in singleSelectOptions" :key="index" :value="option.value">{{ option.label }}</a-select-option></a-select></div><!-- 多选下拉框 --><div class="contentblock"><span class="title">标签:</span><a-select v-model="formData.multiSelect" mode="multiple" :placeholder="placeholder" class="input"><a-select-option v-for="(option, index) in multiSelectOptions" :key="index" :value="option.value">{{ option.label }}</a-select-option></a-select></div><!-- 单选按钮 --><div class="contentblock"><span class="title">性别:</span><a-radio-group v-model="formData.gender" class="input" button-style="solid"><a-radio-button v-for="(option, index) in genderOptions" :key="index" :value="option.value">{{ option.label }}</a-radio-button></a-radio-group></div><!-- 复选框 --><div class="contentblock"><span class="title">爱好:</span><a-checkbox-group v-model="formData.interests" class="input"><a-checkbox v-for="(option, index) in interestOptions" :key="index" :value="option.value">{{ option.label }}</a-checkbox></a-checkbox-group></div><!-- 文本输入框 --><div class="contentblock"><span class="title">其他备注:</span><a-input v-model="formData.remarks" placeholder="请输入备注内容" class="input"/></div><div class="contentblock"><span class="title">测试按钮:</span><a-button @click="SetForm">设置一些值</a-button></div><template #footer><a-button @click="handleCancel">取消</a-button><a-button type="primary" @click="handleSave">提交</a-button></template></a-modal>
</template><script>
import moment from 'moment'export default {data() {return {visible: true,placeholder: '请选择',formData: {processingTime: moment(),processingContent: '',singleSelect: null,multiSelect: [],gender: null,interests: [],remarks: ''},// 单选下拉框选项singleSelectOptions: [{ value: 'option1', label: '选项1' },{ value: 'option2', label: '选项2' },{ value: 'option3', label: '选项3' }],// 多选下拉框选项multiSelectOptions: [{ value: 'tag1', label: '标签1' },{ value: 'tag2', label: '标签2' },{ value: 'tag3', label: '标签3' }],// 性别单选按钮选项genderOptions: [{ value: 'male', label: '男' },{ value: 'female', label: '女' }],// 爱好复选框选项interestOptions: [{ value: 'music', label: '音乐' },{ value: 'sports', label: '运动' },{ value: 'travel', label: '旅行' }]}},methods: {handleCancel() {this.visible = false},// 保存表单逻辑handleSave() {//处理下时间this.formData.processingTime = this.formData.processingTime.format('YYYY-MM-DD HH:mm:ss')//如有其他逻辑在此判断console.log(this.formData)},SetForm(){this.formData.processingTime = moment('2023-01-01 12:00:00', 'YYYY-MM-DD HH:mm:ss')this.formData.processingContent = '测试内容'this.formData.singleSelect = 'option2'this.formData.multiSelect = ['tag1', 'tag3']this.formData.gender = 'female'this.formData.interests = ['music', 'sports']this.formData.remarks = '备注内容'}}
}
</script><style scoped>
.title {font-weight: bold;color: black;margin: 9px;text-align: right;width: 80px;
}
.contentblock {display: flex;margin: 16px;align-items: center;
}
.input{width: 300px;
}
</style>
2.效果
