# 下拉选择单选

# 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>
显示代码 复制代码
最后更新时间: 2022/11/2 17:53:53