aiot-app/pages/pda/jobBooking/componentsTable/checkbox/checkbox.vue

<template>
	<view class="container">
		<view class="d-table">
			<!-- type="selection"  @selection-change="selectionChange" -->
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">
					
						<checkbox-group @change="handlerChecked">
							<checkbox :checked="isAllChecked" value="1" />
						</checkbox-group>
					</uni-th>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">序列号</uni-th>
					<uni-th align="center">刻码</uni-th>
					<uni-th align="center" v-if="itemData.currentTaskDiagram.type == 4">发货码</uni-th>
					<uni-th align="center">投料数量</uni-th>

					<uni-th align="center">是否合格</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				
				<uni-tr v-for="(item, index) in listArr" :key="index">
					<uni-td>
						<checkbox-group @change="handlerCheckedTow($event, index, item)">
							<checkbox :checked="item.selected" value="1" />
						</checkbox-group>
					</uni-td>
					<uni-td>{{ index + 1 }}</uni-td>
					<uni-td>
						{{ item.extInfo && item.extInfo.productSequence }}
					</uni-td>
					<uni-td>
						<input class="uni-input" v-model="item.extInfo.engrave"
							:disabled="!itemData.currentTaskDiagram.isFirstTask" @input="blurNum(item.extInfo.engrave)"
							type="digit"></input>
					</uni-td>
					<uni-td v-if="itemData.currentTaskDiagram.type == 4">
						<input class="uni-input" v-model="item.sendCode" type="digit"></input>
					</uni-td>

					<uni-td>
						{{ item.feedQuantity }}
					</uni-td>
					<uni-td>
						<zxz-uni-data-select :localdata="areaList" v-model="item.extInfo.isQualified" dataValue='value'
							format='{name}' dataKey="name" filterable :clear='false'
							v-if="!itemData.currentTaskDiagram.isFirstTask"
							@chaneg="handlerChange(item, index)"></zxz-uni-data-select>

						<text v-else>{{ item.extInfo.isQualified == 1 ? '合格' : '不合格' }}</text>
					</uni-td>


				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Array,
			default: () => []
		},
		itemData: {
			type: Object,
			default: () => { }
		},

	},

	data() {
		return {
			pickerIndex: 0,
			isAllChecked: true,
			areaList: [
				{
					name: '合格',
					value: 1,
				},
				{
					name: '不合格',
					value: 2,
				},

			],
			listArr: [],
			selectedIndexs: []
		};
	},
	watch:{
		tableData:{
			handler(v){
				this.listArr =v;
			},
			immediate:true,
			deep:true
		}
	},
	
	methods: {
		handlerCheckedTow(e, index, item) {
			console.log(item);
			if (e.detail.value.length) {
				// this.$set(this.tableData[index], 'selected', true);
				item.selected = true;
			} else {
				// this.$set(this.tableData[index], 'selected', false);
				item.selected = false;
			}
			this.listArr[index] =item;
			// this.$emit('tableDataFn', this.tableData);

			console.log(this.tableData);
			this.$nextTick(() => {
				let a = this.listArr.filter(v => v.selected);
				if (a.length && a.length == this.listArr.length) {
					this.isAllChecked = true;
				} else {
					this.isAllChecked = false;
				}
			})

			
		},

		//全选
		handlerChecked(e) {

	
			console.log(this.listArr);
			if (e.detail.value.length) {
				// 全选

				this.listArr.map(item => {
					item.selected = true;
				})


			} else {
				// 未选中
				this.listArr.map(item => {
					item.selected = false;
				})

			}
			this.listArr = [];

			this.$set(this, 'listArr', this.listArr);

			this.listArr = this.tableData;

			this.$emit('tableDataFn', this.tableData);
		},


		blurNum(workReportInfo) {

			this.$emit('tableDataFn', this.tableData);
		},
		handlerChange(item, index) {
			// this.$emit('tableDataFn', this.tableData);
			console.log(item, index);
		},

		selectionChange(e) {

			this.selectedIndexs = e.detail.index;
		},
	}

}
</script>

<style lang="scss" scoped>
::v-deep .uni-select--mask{
	position: relative !important;
}
.container {
	padding: 10rpx;
	overflow: auto;

	checkbox {
		transform: scale(0.8);
	}
}

.uni-input {
	width: 150rpx;
	border: 1px solid #F0F8F2;
	background: #F0F8F2;
	color: #157A2C;
}

/deep/.uni-table {
	min-width: 100vw !important;

	.uni-table-td,
	.uni-table-th {
		padding: 20rpx 10rpx !important;
		text-align: center !important;
		font-weight: normal !important;
		font-size: 26rpx !important;
	}

	.uni-table-text {
		font-size: 26rpx !important;
	}
}
</style>