绑定下拉框其中有两种一种是自定义,一种是数据库接口获取
一、自定义
1.下拉列表绑定
<el-col :span="10" :offset="2">
<cs-form-item :label="'计量单位'">
<cs-field-select
:placeholder="'请选择'"
v-model="item.Unit"
:options="Measurement"
@input="change"
/>
</cs-form-item>
</el-col>
2.@input绑定改变值
methods: {
/* 改变值 */
change() {
this.$forceUpdate()
}
},
4.绑定data item和Measurement
data() {
return {
item: {},
tenantId: this.$store.getters.tenant.TenantId,
Measurement: Parameter.Assets.Measurement.Items,
}
},
import引入组件,@表示src
<script>
import Parameter from '@/utils/parameters'
export default {
name: 'Insured_from',
props: ['formData'],
data() {
return {
item: {},
tenantId: this.$store.getters.tenant.TenantId,
CertTypeOptions: [],
Measurement: Parameter.Assets.Measurement.Items,
areaOption: [],
supplierOption: []
}
},
created() {
this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
this.areaOption = res
}),
this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
this.supplierOption = res
})
},
methods: {
/* 改变值 */
change() {
this.$forceUpdate()
}
},
/* formData绑定item */
watch: {
formData: {
handler(val) {
this.item = val
},
immediate: true,
deep: true
}
}
}
</script>
5.根据上面代码找到文件import Parameter from ‘@/utils/parameters’
let Parameter = {}
/* 公共 */
// Parameter.Common = {
Parameter.Assets = {
Status: {
Title: '计量单位',
Items: [
{ Value: 0, Label: '个' },
{ Value: 1, Label: '张' },
{ Value: 2, Label: '套' },
{ Value: 3, Label: '台' },
{ Value: 4, Label: '组' },
{ Value: 5, Label: '架' }
]
},
// 状态
CertificationTypeId: {
Title: '状态',
Items: [
{ Value: -1, Label: '退出' },
{ Value: 0, Label: '闲置' },
{ Value: 1, Label: '在用' },
{ Value: 2, Label: '借用' },
{ Value: 3, Label: '维修中' },
{ Value: 4, Label: '境报废待审' },
{ Value: 5, Label: '调拨待审' },
{ Value: 6, Label: '处置待审' },
{ Value: 7, Label: '领用待审' },
{ Value: 8, Label: '借用待审' }
]
},
// 计量单位
Measurement: {
Title: '计量单位',
Items: [
{ Value: '个' , Label: '个' },
{ Value: '张', Label: '张' },
{ Value: '套', Label: '套' },
{ Value: '台', Label: '台' },
{ Value: '组', Label: '组' },
{ Value: '架', Label: '架' }
]
}
}
export default Parameter
二、数据库绑定
1.
<el-col :span="10" :offset="2">
<cs-form-item :label="'区域'">
<cs-field-select
:placeholder="'请选择'"
v-model="item.PlaceName"
:options="areaOption"
@input="change"
/>
</cs-form-item>
</el-col>
import Parameter from '@/utils/parameters'
areaOption: [],
this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
this.supplierOption = res
})
<script>
import Parameter from '@/utils/parameters'
export default {
name: 'Insured_from',
props: ['formData'],
data() {
return {
item: {},
tenantId: this.$store.getters.tenant.TenantId,
CertTypeOptions: [],
Measurement: Parameter.Assets.Measurement.Items,
areaOption: [],
supplierOption: []
}
},
created() {
this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
this.areaOption = res
}),
this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
this.supplierOption = res
})
},
methods: {
/* 改变值 */
change() {
this.$forceUpdate()
}
},
/* formData绑定item */
watch: {
formData: {
handler(val) {
this.item = val
},
immediate: true,
deep: true
}
}
}
</script>
<style lang="scss" scoped>
.title-part {
margin: 0 5% 20px;
padding-bottom: 5px;
border-bottom: solid 1px #dadada;
}
</style>
[HttpGet("FetchSupplierOption")]
public List<SupplierOption> FetchSupplierOption()
{
var token = this.GetSecToken();
using (var db = Db.GetTenantDb(token.TenantId))
{
var result = Supplier.GetList(db, token.TenantId);
var resultArray = new List<SupplierOption>();
foreach (var item in result)
{
resultArray.Add(new SupplierOption() { Value = item.Id, Label = item.Name });
}
return resultArray;
}
}