不废话 直接上代码
<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>