更新记录

1.0.0（2025-02-21） 下载此版本

发布初版

平台兼容性

MultiplePicker 多选组件

组件名: xt-multiple-picker

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <button @click="showPicker">选择</button>
        <button @click="log">打印</button>
        <xt-multiple-picker v-model="xtID" :show.sync='show' :range="list"
            @scrolltolower='scrolltolower'></xt-multiple-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                list: [{
                        label: '员工一',
                        value: '1',
                    },
                    {
                        label: '员工二',
                        value: '2',
                    },
                    {
                        label: '员工三',
                        value: '3',
                    },
                    {
                        label: '员工四',
                        value: '4',
                    },
                    {
                        label: '员工五',
                        value: '5',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    },
                    {
                        label: '员工六',
                        value: '6',
                    }
                ],
                xtID: [{
                        label: '员工一',
                        value: '1',
                    },
                    {
                        label: '员工二',
                        value: '2',
                    }, {
                        label: '员工三',
                        value: '3',
                    }
                ],
            }
        },
        methods: {
            showPicker() {
                this.show = !this.show;
            },
            log() {
                console.log(this.xtID);
            },
            onchange(e) {
                console.log(e)
            },
            close() {
                console.log('关闭')
            },
            confirm(e) {
                console.log(e)
            },
            scrolltolower() {
                this.list = this.list.concat([{
                        label: '员工七',
                        value: '7',
                    },
                    {
                        label: '员工七',
                        value: '7',
                    },
                    {
                        label: '员工七',
                        value: '7',
                    }, {
                        label: '员工七',
                        value: '7',
                    }, {
                        label: '员工七',
                        value: '7',
                    }, {
                        label: '员工七',
                        value: '7',
                    },
                ])
            }
        }
    }
</script>

<style lang="scss">
    .xt {
        padding: 0 20rpx;
        display: flex;
        flex-direction: column;
        gap: 15rpx;
    }
</style>

实际使用中,请确保`value`每项都不同

API

Events