# 下拉选择单选
# SksSelectSingleByLookupController
通过远程获取选项
<template>
<div>
<el-form>
<el-row>
<el-col :span="12">
<el-form-item prop="personId" label="人员ID">
<el-input v-model="form.personId" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="personName" label="人员姓名">
<el-input v-model="form.personName" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-form-item prop="personId" label="人员">
<SksSelectSingleByLookupController
:queryParams="{}"
:request-url="urlPath"
:formData="form"
prop-name="personId"
valueType="string"
option-key="personId" option-label="description"
:option-disabled-func="(item)=>item.status == 1"
:lookup-map="[
{
lookupProp: 'description',
formProp: 'personName',
},
]"
>
</SksSelectSingleByLookupController>
</el-form-item>
<el-form-item>
</el-form-item>
</el-form>
</div>
</template>
<script>
//在vuepress中使用 import会报错
const Mock=require('mockjs')
export default {
data() {
return {
urlPath: `/mockData/30.80.a`,
form:{
personId: undefined,
personName: undefined,
}
}
},
created(){
this.initMockRequest()
},
methods: {
initMockRequest(){
//制造测试数据
let mock = Mock.mock({
'list|100':[{
personId: '@id',
description: '@cname',
'age|-30-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
}],
total: 100,
});
console.log("mockPage",mock)
try{
this.sksUtils.initListVueVirtualUUID(mock.list)
}catch(e){
console.warn("初始化模拟数据mock.list出错")
console.warn(e)
}
this.addSuccessController({
path: this.urlPath,
result: mock,
})
},
}
}
</script>
显示代码 复制代码 复制代码