更新记录

1.0.0（2025-04-12） 下载此版本

初始化版本

平台兼容性

##什么时候使用这个插件?
只要你用select,单选多选，任何时候都适合使用 ^_^

##引用组件
        <template>
    <view class="conte" style="padding-top: 20rpx;">
        <view class="item">
            <view style="font-weight: bold;">单选（接口接收关键字，和分页参数，返回相应数据）每次滚动分页获取数据</view>
            <view class="input_put" style="display: flex;" @click="openUserSelect('itemNumber')">
                <view>
                    <text style="color: #888;">{{formdataValue.itemNumber || '请选择'}}</text>
                </view>
                <view class="tab_icon">
                    <image src="@/static/workOverTime/btn_01.png" style="width: 100%; height: 100%;"></image>
                </view>
            </view>
        </view>
        <view class="item">
            <view style="font-weight: bold;">单选（接口不接收关键字，和分页参数，一次性返回大量数据,自测2000条，速度还能接受）</view>
            <view class="input_put" style="display: flex;" @click="openUserSelect('stationCode')">
                <view>
                    <text style="color: #888;">{{formdataValue.stationCode || '请选择'}}</text>
                </view>
                <view class="tab_icon">
                    <image src="@/static/workOverTime/btn_01.png" style="width: 100%; height: 100%;"></image>
                </view>
            </view> 
        </view>
        <view class="item">
            <view style="font-weight: bold;">多选（同上面两种情况下，实现多选）</view>
            <view class="input_put" style="display: flex;" @click="openUserSelect('sharer')">
                <view>
                    <text style="color: #888;"> 
                        <text v-if="formdataValue.sharer.length == 0">请选择</text>
                        <text v-else v-for="(info,indexx) in formdataValue.sharer" :key="indexx">{{info}},</text>
                    </text>
                </view>
                <view class="tab_icon">
                    <image src="@/static/workOverTime/btn_01.png" style="width: 100%; height: 100%;"></image>
                </view>
            </view>
        </view>
        <!-- 单选多选组件 -->
        <bottom-select ref="userSelect"
            :fetch-data="fetchUserList"
            v-model="selectedValues"  
            label-key="name"  
            :multiple="selecttype == 'sharer'?true:false"
            value-key="id" 
            placeholder="请输入关键词搜索"
            @select="selectval"
            @confirm="handleUserSelect" />

    </view>
    </template>

    <script>
    var selecttype;
    import BottomSelect from '@/components/bottom-select/bottom-select.vue';
    export default {
        components: {
            BottomSelect
        },
        data() {
            return {
                formdataValue: {
                    itemNumber: '',
                    itemNumberId: '',
                    stationCode: '',
                    stationCodeId: '',
                    sharer: '',
                    sharerId: ''
                },
                selecttype:'',
                selectedValues: { 
                    ids: [], 
                    names: [] 
                }
            };
        },
        onLoad(e) {

        },
        methods: {

            // 打开选择器
            openUserSelect(type) {
                selecttype = type;
                this.selecttype = selecttype;
                console.log(this.formdataValue[type+'Id'])
                if(this.formdataValue[type+'Id']){
                    this.selectedValues.ids = this.formdataValue[type+'Id'];
                    this.selectedValues.names = this.formdataValue[type];
                }else{
                    this.selectedValues= {ids: [],names: []};
                }
                this.$refs.userSelect.open();
            },
            //单选回调
            selectval(val){
                this.formdataValue[selecttype] = val.rawData.name;
                this.formdataValue[selecttype+'Id'] = val.rawData.id;
            },
            // 多选回调
            handleUserSelect(val) {
                this.formdataValue[selecttype] = val.names;
                this.formdataValue[selecttype+'Id'] = val.ids;
            },
            // 获取数据列表（带搜索）
            async fetchUserList(params) {
                // 1.支持搜索条件和分页的接口,请根据实际使用更换参数名
                if(selecttype =='itemNumber'){
                    //请根据实际业务接口更换下面的接口
                    //参数说明 code 名称 SkipCount 第几页 MaxResultCount 每页多少条
                    //total 是接口返回总共有多少条数据
                    // const res = await AxiosGetProject({Code: params.keyword,SkipCount:params.page,MaxResultCount:params.pageSize});

                    //模拟返回数据
                    const res = {data:[{
                        id: "1",
                        value:"1", 
                        label: "人员"
                    }],total:1500}
                    for(let i=1;i<1500;i++){
                        res.data.push({
                            id: JSON.stringify(i+1),
                            value:JSON.stringify(i+1),
                            label: "人员0"+i
                        })
                    }

                    return {data: res.data.map(item => ({id: item.value,name: item.label})),total:res.data.total}

                // 2.不支持搜索条件和分页的接口，一次性返回大量数据，这里演示单选和多选使用了同一数据源，请根据实际情况使用
                }else if(selecttype =='stationCode'||selecttype =='sharer'){    

                    //这里请换成真实接口
                    // const res = await GetMainProjects();

                    //模拟返回数据
                    const res = {data:[{
                        id: "1",
                        mainProjectId:"1", 
                        mainProjectInfor: "项目"
                    }]}
                    for(let i=1;i<1500;i++){
                        res.data.push({
                            id: JSON.stringify(i+1),
                            mainProjectId:JSON.stringify(i+1),
                            mainProjectInfor: "项目0"+i
                        })
                    }
                    if(params.keyword){
                        const filteredArr = res.data.filter(item => {
                            return String(item.mainProjectInfor).includes(params.keyword);
                        });
                        return {data: filteredArr.map(item => ({id: item.mainProjectId,name: item.mainProjectInfor})),total:0}
                    }else{
                        return {data: res.data.map(item => ({id: item.mainProjectId,name: item.mainProjectInfor})),total:0}
                    }
                }
            }
        }
    };
    </script>
    <style>
    .conte {
        width: 100%;
        padding-bottom: 160rpx;
    }

    .item {
        padding: 0 14pt;
        background-color: #FFFFFF;
        padding-bottom: 30rpx;
        /* width: 100%; */
    }

    .input_put {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #E5E5E5;
        width: 100%;
        justify-content: space-between;
    }

    .pickerDate {
        color: #999999;
    }

    .picker_put {
        display: flex;
        justify-content: space-between;
    }

    .tab_icon {
        width: 36rpx;
        height: 36rpx;
    }
</style>