下拉选择多选 SksSelectMultipleByLookupService

通过远程获取下拉选项

简单使用

<template>
    <div>
        <el-form>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="personIdList" label="人员ID">
                        {{form.personIdList}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item prop="personIdList" label="人员">
                <SksSelectMultipleByLookupController
                        :queryParams="{}"
                        :request-url="urlPath"
                        :formData="form"
                        prop-name="personIdList"
                        valueType="string"
                        option-key="personId" option-label="description"
                        :option-disabled-func="(item)=>item.status == 1"
                >
                </SksSelectMultipleByLookupController>
            </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.81.a`,
                form:{
                    personIdList: 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>

显示代码 复制代码 复制代码

选项已不再显示

在关联中,例如用户已被禁用,获取的下拉列表不存在,但是关联数据实际上是存在的

使用 valueRowList 将关联数据合并进下拉list中展示

[ 1, 2 ] [ { "personId": 1, "description": "用户1" }, { "personId": 2, "description": "用户2" } ]

<template>
    <div>
        <el-form>
            <el-row>
                <el-col :span="12">
                    <el-form-item prop="personIdList" label="人员ID">
                        {{form.personIdList}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item  label="viPersonList">
                        {{form.viPersonList}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item prop="personId" label="人员">
                <SksSelectMultipleByLookupController
                        :queryParams="{}"
                        :request-url="urlPath"
                        :formData="form"
                        prop-name="personIdList"
                        valueType="string"
                        option-key="personId" option-label="description"
                        :option-disabled-func="(item)=>item.status == 1"
                        :value-row-list="form.viPersonList"
                >
                </SksSelectMultipleByLookupController>
            </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.81.b`,
                form:{
                    personIdList: [1,2],
                    personName: undefined,
                    viPersonList:[
                        {
                            personId: 1,
                            description: '用户1'
                        },
                        {
                            personId: 2,
                            description: '用户2'
                        }
                    ]
                }
            }
        },
        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>

显示代码 复制代码 复制代码