# 复选表格

### 导入使用

```code[javascript]
import seTableCheck from "ss-universal-client-web/comp/data/su-table-check";
```

### 基本用法

:::demo
```html

<template>
    <div>
        {{selection}}
        <br>
        <el-button @click="getSelection()">获取选择数据</el-button>
        <el-button @click="removeSelectionItem()" v-if="selection.length">移除第一个选中数据</el-button>
        <el-button @click="clearSelection()" v-if="selection.length">清空选择数据</el-button>
        <su-table-check
            ref="multipleTable"
            :data="tableData"
            row-key="id"
            :across="true" :max="10"
            :disabled-ids="[]"
            @selection-change="selectionChange"
        >
            <el-table-column type="index" :index="(index)=>{return index+1}"></el-table-column>
            <el-table-column prop="id" label="标识"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
        </su-table-check>
        <su-pagination :getPage="getPage" :page.sync="page"></su-pagination>
    </div>
</template>

<script>
export default {
    components: {
        seTableCheck,sePagination
    },
    data () {
        return {
            selection: [{ "id": 20, "name": "name01"}],
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
            },
            tableData: []
        }
    },
    async mounted(){
        this.getPage();
        let multipleTable = await this.getRef("multipleTable");
        multipleTable.setSelectionData(this.selection);
    },
    methods: {
        getPage(){
            let vm=this;
            vm.page.pageCount = 100;
            let list=[];
            let baseId = this.page.pageIndex*20;
            for (let i = 0; i < 10; i++) {
                list.push({
                    id: baseId+i,
                    name: "name"+ i + baseId
                })
            }
            vm.tableData = list;
        },
        async removeSelectionItem(){
            let multipleTable = await this.getRef("multipleTable");
            multipleTable.removeSelectionItem(this.selection[0]);
            await this.getSelection();
        },
        async clearSelection(){
            let multipleTable = await this.getRef("multipleTable");
            multipleTable.clearSelection();
            await this.getSelection();
        },
        async getSelection(){
            let multipleTable = await this.getRef("multipleTable");
            this.selection = multipleTable.getSelectionData();
        },
        selectionChange(list,item){
            this.selection = list;
            console.log("选择数据变化：",list,item);
        }
    }
}
</script>

```
:::

### Table Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data     |  绑定数据           | Array | — | — |
| row-key  | 数据唯一标识的key           | string | — | id |
| across     |  是否支持跨页选择           | string | — | false |
| disabled-ids     |  禁止选择的数据项id数组,数据更新前设置          | array | — | [] |
| max     |  最大选择数量          | Number | — | 999 |
| maxOverflowTipContent     |  超出最大选择数量的提示文字          | String | — | 已达到最大选择数量 |
| row-selection | 行点击是否能选中 | Boolean | —      |    true    |
| checkboxFixed | 固定复选框 | String/Boolean | left/right/true/false | false

### Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| setSelectionData(list) | 设置选中数据 | 选择数据 | -- |
| getSelectionData() | 获取选中数据 | -- | list |
| removeSelectionItem(item) | 移除某个选中数据的选中状态 | -- | -- |
| clearSelection() | 清除选中数据 | -- | -- |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| selection-change(list,item) | 用户触发、当选择项发生变化时会触发该事件 | list：所有选择数据，item:当前操作数据(全选操作时为null) |