Vant4 Picker 选择器 多选

不废话  直接上代码

<template>
    <div>
        <van-cell title="选择项" is-link @click="showPicker = true">
            {
   
   { fullName(selectList.join(', ')) }}
        </van-cell>
        <van-popup v-model:show="showPicker" position="bottom">
            <div style="
                display: flex;
                justify-content: space-between;
                height: 44px;
                line-height: 44px;
              ">
                <van-button style="border: none; color: #969799" @click="showPicker = false" size="normal">取消</van-button>
                <div style="border: none; color: #000" size="normal">确认</div>
                <van-button style="border: none; color: #6398fb" @click="checkedChange" size="normal">确认</van-button>
            </div>
            <van-checkbox-group v-model="selectList">
                <van-cell v-for="(item, index) in columns " :key="index" :title="` ${item.id}`">
                    <template #right-icon>
                        <van-checkbox :name="item.id" />
                    </template>
                </van-cell>
            </van-checkbox-group>
        </van-popup>
    </div>
</template>
<script setup >
import { reactive, onMounted, ref, computed, nextTick } from "vue";
const selectList = ref([]);
const showPicker = ref(false);
const columns = [{ id: 1, name: '1', value: '1' }, { id: 2, name: '2', value: '2' }]
const checkedChange = () => {
    showPicker.value = false;
};
// 写这个的目的就是防止value 过长  根据实际情况替换
const fullName = (v) => {
    console.log('v', v.length);
    if (v.length >= 20) {
        const firstPart = v.substring(0, 5);
        const lastPart = v.substring(v.length - 5);
        return `${firstPart}...${lastPart}`;
    }
    return v
}

</script>
<style scoped>
/* 写这个css的目的就是 数据太多让他自适应滚动 */
::v-deep(.van-checkbox-group) {
    max-height: 40vh;
    overflow-y: auto;
}

::v-deep(.van-checkbox-group::-webkit-scrollbar) {
    display: none;
}
</style>