官方文档: https://www.antdv.com/components/select-cn/
1.写死方式
template
<a-form-item label="使用状态">
<a-select v-decorator="['status']" placeholder="请选择状态" initialValue="0">
<a-select-option v-for="(obj,index) in statusSelectData" :key="obj.value" :value="obj.value" :title="obj.name">
{{obj.name}}
</a-select-option>
</a-select>
</a-form-item>
data
data () {
return {
statusSelectData: [{"name":"已禁用","value":0},{"name":"已启用","value":1}],//下拉框状态数据
}
},
2.后端获取
template
<a-form-item label="选择部门">
<a-select
show-search
placeholder="请选择部门"
style="width: 100%"
v-decorator="['departmentId']"
>
<a-select-option v-for="(obj,index) in deptSelectData" :key="obj.departmentId" :value="obj.departmentId">
{{ obj.departmentName }}
</a-select-option>
</a-select>
</a-form-item>
data
data () {
return {
deptSelectData: [],//部门下拉框数据,
}
},
created 函数
在加载组件时,初始化下拉框数据
created () {
//初始化请求后端数据
this.$http.post('/department/findAll').then(res => {
this.deptSelectData = res.result;
});
},
3.完整代码
<template>
<a-modal
title="标题"
:width="640"
:visible="visible"
:confirmLoading="loading"
@ok="() => { $emit('ok') }"
@cancel="() => { $emit('cancel') }"
>
<a-spin :spinning="loading">
<a-form :form="form" v-bind="formLayout">
<a-form-item v-show="false" label="主键ID">
<a-input v-decorator="['id', { initialValue: 0 }]" disabled />
</a-form-item>
<a-form-item label="选择部门">
<a-select
show-search
placeholder="请选择部门"
style="width: 100%"
v-decorator="['departmentId']"
>
<a-select-option v-for="(obj,index) in deptSelectData" :key="obj.departmentId" :value="obj.departmentId">
{{ obj.departmentName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="使用状态">
<a-select v-decorator="['status']" placeholder="请选择状态" initialValue="0">
<a-select-option v-for="(obj,index) in statusSelectData" :key="obj.value" :value="obj.value" :title="obj.name">
{{obj.name}}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import pick from 'lodash.pick'
// 表单字段
const fields = ['id','projectName','projectCode','homeUrl','departmentId','remark','status']
export default {
props: {
visible: {
type: Boolean,
required: true
},
loading: {
type: Boolean,
default: () => false
},
model: {
type: Object,
default: () => null
}
},
data () {
this.formLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 13 }
}
}
return {
form: this.$form.createForm(this),
deptSelectData: [],//下拉框数据,
statusSelectData: [{"name":"已禁用","value":0},{"name":"已启用","value":1}],//下拉框状态数据
}
},
created () {
// 防止表单未注册
fields.forEach(v => this.form.getFieldDecorator(v))
// 当 model 发生改变时,为表单设置值
this.$watch('model', () => {
this.model && this.form.setFieldsValue(pick(this.model, fields))
});
//初始化请求后端数据
this.$http.post('/department/findAll').then(res => {
this.deptSelectData = res.result;
});
},
methods: {
}
}
</script>