feat(components): [ElCheckboxGroup] add Fragment (#4743)

packages/components/checkbox/__tests__/checkbox.spec.ts

@@ -308,6 +308,21 @@ describe('check-button', () => {
     ).toEqual('#ff0000')
   })
 
+  test('button group tag', () => {
+    const wrapper = _mount(
+      `
+      <el-checkbox-group v-model="checkList" tag="tr">
+        <el-checkbox-button label="a" ref="a"></el-checkbox-button>
+        <el-checkbox-button label="b" ref="b"></el-checkbox-button>
+        <el-checkbox-button label="c" ref="c"></el-checkbox-button>
+        <el-checkbox-button label="d" ref="d"></el-checkbox-button>
+      </el-checkbox-group>
+      `,
+      () => ({ checkList: ['a', 'b'] })
+    )
+    expect(wrapper.find('tr').classes('el-checkbox-group')).toBeTruthy()
+  })
+
   test('button group min and max', async () => {
     const wrapper = _mount(
       `

packages/components/checkbox/src/checkbox-group.vue

@@ -1,9 +1,3 @@
-<template>
-  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
-    <slot></slot>
-  </div>
-</template>
-
 <script lang="ts">
 import {
   defineComponent,
@@ -12,6 +6,8 @@ import {
   provide,
   nextTick,
   toRefs,
+  h,
+  renderSlot,
 } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isValidComponentSize } from '@element-plus/utils/validators'
@@ -50,18 +46,22 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
+    tag: {
+      type: String,
+      default: 'div',
+    },
   },
 
   emits: [UPDATE_MODEL_EVENT, 'change'],
 
-  setup(props, ctx) {
+  setup(props, { emit, slots }) {
     const { elFormItem } = useCheckboxGroup()
     const checkboxGroupSize = useSize()
 
     const changeEvent = (value) => {
-      ctx.emit(UPDATE_MODEL_EVENT, value)
+      emit(UPDATE_MODEL_EVENT, value)
       nextTick(() => {
-        ctx.emit('change', value)
+        emit('change', value)
       })
     }
 
@@ -88,6 +88,17 @@ export default defineComponent({
         elFormItem.validate?.('change')
       }
     )
+    return () => {
+      return h(
+        props.tag,
+        {
+          class: 'el-checkbox-group',
+          role: 'group',
+          'aria-label': 'checkbox-group',
+        },
+        [renderSlot(slots, 'default')]
+      )
+    }
   },
 })
 </script>