Element UI的table表格中实现复选框勾选

需求：在table中实现勾选多行复选框的内容，点击提交按钮，选择的复选框与表格内容对应

 

<template>
	<div>
		<div>
			<span>已选择的运动：</span>
			<span style="margin-right: 20px" v-for="(item,index) in interestListArry" :key="index">{{item.groupId}}<span>：</span><span v-for="(i,j) in item.itemList" :key="j">{{i}}<span v-if="j+1 < item.itemList.length ? true : false">、</span></span></span>
    	</div>
		<div style="margin-top: 10px;margin-bottom: 10px">
			<el-button type="primary" size="small" @click="taskAddClick">确认选择</el-button>
		</div>
		<el-table border :data="data1">
			<el-table-column label="类型" align="center" prop="groupName"></el-table-column>
			<el-table-column label="项目" align="center">
				<template #default="scope">
					<el-checkbox-group v-model="scope.row.ischeckAll" >
						<el-checkbox v-for="item in scope.row.interestList" :value="item.tasteId" :label="item.name" :key="item.tasteId" >{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				data1:[
					{
						id: 1,
						groupName:'运动',
						ischeckAll: [],
						interestList:[
							{
								"name": "篮球",
								"tasteId": 10
							}, {
								"name": "足球",
								"tasteId": 11
							}, {
								"name": "乒乓球",
								"tasteId": 12
							}
						]
					},
					{
						id: 2,
						groupName:'棋类',
						ischeckAll: [],
						interestList:[
							{
								"name": "军旗",
								"tasteId": 14
							}, {
								"name": "象棋",
								"tasteId": 15
							}, {
								"name": "五子棋",
								"tasteId": 16
							}
						]
					}
				],
				interestListArry: []
			};
		},
		methods: {
			// 确认选择
			taskAddClick(){
				this.interestListArry = [],
				this.data1.forEach(item=>{
					if(item.ischeckAll.length > 0){
					this.interestListArry.push(
						{
							groupId: item.groupName,
							itemList: item.ischeckAll
						}
					)
					}
				})
			},
		}
	}
</script>
<style scoped>
</style>