当前位置：首页 > news >正文

uniapp 卡片勾选

news 2025/8/4 17:50:32

前言

公司的app项目使用的uniapp，项目里有一个可勾选的卡片功能，效果图如下：
在这里插入图片描述
找了一圈没找到什么太好的组件，于是就自己简单写了一个，记录一下。避免以后还会用到

代码

<template><view class="card-selection"><checkbox-group @change="checkboxChange"><view v-for="(item, index) in checkboxList" :key="index"><!-- 顶部标题部分 --><slot name="header" :row="item" :rowIndex="index"></slot><label><view v-if="item.checkboxShow" class="card-selection-item" :style="itemStyle"><!-- 左侧复选框 --><view class="item1"><checkbox :value="item[rowKey]" :disabled="item.checkboxDisabled":checked="item.checkboxChecked" /></view><!-- 右侧自定义插槽内容 --><view class="item2"><slot name="default" :row="item"></slot></view></view></label></view></checkbox-group></view>
</template><script>export default {props: {// 唯一值rowKey: {type: String,default: 'id'},// 样式itemStyle: {type: String,default: ''}},data() {return {// 列表checkboxList: [],// 记录已经勾选了的数据hasCheckedList: []}},methods: {// 初始化init(list) {this.checkboxList = []// 添加选中、禁用、是否显示等属性list.forEach(item => {item.checkboxChecked = falseitem.checkboxDisabled = falseitem.checkboxShow = truethis.checkboxList.push(item)})},// 复选框勾选checkboxChange(e) {this.hasCheckedList = e?.detail?.value || []//console.log("复选框勾选数据：", this.hasCheckedList)// 返回给父组件勾选的值const checkedList = this.checkboxList.filter(item => this.hasCheckedList.includes(item[this.rowKey]))// 修改被勾选的数据的checkboxCheckedthis.checkboxList.forEach(item => {item.checkboxChecked = this.hasCheckedList.includes(item[this.rowKey])})//console.log("数据列表：",this.checkboxList)this.$emit('checkboxChange', {checkedValueList: this.hasCheckedList,checkedList: checkedList})console.log("复选框勾选数据：", {checkedValueList: this.hasCheckedList,checkedList: checkedList})},// 复选框禁用逻辑checkboxDisabled(callback) {this.checkboxList.forEach(item => {item.checkboxDisabled = Boolean(callback(item))})},// 复选框勾选逻辑checkboxCheckd(callback) {this.checkboxList.forEach(item => {//console.log("复选框勾选：", item, callback(item))item.checkboxChecked = Boolean(callback(item))})// 自动勾选不会触发checkboxChange事件，这里需要手动更新let valueList = this.checkboxList.filter(item => item.checkboxChecked).map(item => item[this.rowKey])this.checkboxChange({detail:{value:valueList}})this.$forceUpdate()},// 清空勾选clearChecked() {this.checkboxList.forEach(item => {item.checkboxChecked = false})// 自动勾选不会触发checkboxChange事件，这里需要手动更新let valueList = this.checkboxList.filter(item => item.checkboxChecked).map(item => item[this.rowKey])this.checkboxChange({detail:{value:valueList}})},// 清空禁用clearDisabled() {this.checkboxList.forEach(item => {item.checkboxDisabled = false})},// 控制数据的显示和隐藏，用于可能出现数据筛选的情况showCheckboxData(callback) {this.checkboxList.forEach(item => {item.checkboxShow = Boolean(callback(item))})}},}
</script><style lang="scss" scoped>.card-selection-item {padding: 10px;display: flex;.item1 {width: 30px;height: 30px;flex-shrink: 0;}.item2 {flex-shrink: 1;width: 100%;}}
</style>