# 复选表格全选统计
<br />
用于表格数据全选，及统计选择条目

## 导入使用
```code[javascript]
import seCheckboxAll from "ss-universal-client-web/comp/widget/su-checkbox-all";
```

## 基本用法

:::demo `:checked="false"` 默认`false`。右上角x显示与否，默认显示，`false`不显示。
```html
<template>
    <div>{{checked}}
        <su-checkbox-all v-model="checked" @change="handleChange"></su-checkbox-all>
    </div>
</template>

<script>
    export default {
        components:{seCheckboxAll},
        data() {
            return {
                checked : false
            }
        },
        methods : {
            handleChange(val) {
                console.log(val);
            }
        }
    }
</script>
```
:::

## 自定义文案
可通过`label`重置选择文案。

:::demo 

```html
<template>
    <div>
        <su-checkbox-all :label="label"></su-checkbox-all>
    </div>
</template>

<script>
    export default {
        components:{seCheckboxAll},
        data() {
            return {
                label: '全选'
            }
        }
    }
</script>
```
:::

## 展示统计
未勾选全选时，可展示所有数据数目
:::demo `showCount=true`是否展示统计，默认`true`展示。`:count="multipleSelection.length"`配合`showCount`使用。

```html
<template>
    <div>
        <su-checkbox-all :showCount="showCount" :count="count"></su-checkbox-all>
    </div>
</template>

<script>
    export default {
        components:{seCheckboxAll},
        data() {
            return {
                showCount: true,
                count: 3
            }
        }
    }
</script>
```
:::

## Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| v-model | 是否全选 | boolean | — | false |
| label | 重置文案 | string | — | — |
| count | 统计数据展示 | number | — | — |
| isIndeterminate | 全选按钮是否模糊状态 | boolean | — | false |

## Slot

| Name | Description |
|------|--------|
| — | 描述 |
| label | 文案内容 |

## Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 绑定值变化时触发的事件 | 更新后的值 |