Iview的CheckboxGroup，on-change事件传值id+name

方法：由于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>