uniapp 卡片勾选_uniapp card前面做选择

前言

公司的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 = false
					item.checkboxDisabled = false
					item.checkboxShow = true
					this.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]))
				// 修改被勾选的数据的checkboxChecked
				this.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

没啥复杂的代码，看一下代码就能知道如何使用。效果图如下：