方法：由于CheckboxGroup绑定的v-model的值就是Checkbox的label的值，所有只要给label处理就可以；:label="item.id+':'+item.tagName"
<template>
<div>
<CheckboxGroup v-model="checkboxValue" @on-change="checkboxChange">
<Checkbox
v-for="(item) in tagsList"
:key="item.id"
:label="item.id+':'+item.tagName"
>{{ item.tagName }}</Checkbox
>
</CheckboxGroup>
<Tabs @on-click="tabsChange" type="card" v-model="tabsValue" name="setTab">
<TabPane
v-for="item in checkboxValue"
:key="item"
:name="item.split(':')[0]"
:label="item.split(':')[1]"
tab="setTab" >
</TabPane>
</Tabs>
</div>
</template>
<script>
import { productsTags, addProducts } from '@/api/business'
export default {
data () {
return {
tagsList: [
{id: "7200", tagName: "纳税凭证"},
{id: "6608", tagName: "驾驶证"},
{id: "2848", tagName: "学位"},
], // 列表
checkboxValue:[],//checkbox的选中值['7200:纳税凭证', '6608:驾驶证']
tabsValue:'',//tabs的活动标签,如：7200
}
},
methods: {
//tabs切换
tabsChange(value){
// 此处的value就是this.tabsValue的值
console.log(value === this.tabsValue)
console.log('点击Tabs切换时tabsChange传递的参数是：')
console.log(value)
console.log('Tabs绑定的this.tabsValue值是：')
console.log(this.tabsValue)
},
// checbox切换值改变
checkboxChange(data){
// 此处的data就是checkboxValue的值,所以可以完全不用on-change方法也可实现相同效果
// ['7200:纳税凭证', '6608:驾驶证']
console.log(data === this.checkboxValue)
console.log('多选时CheckboxGroup绑定的this.checkboxValue值是：')
console.log(this.checkboxValue)
console.log('多选时checkboxChange传递的参数是：')
console.log(data)
},
}
}
</script>
