# 复选表格

### 导入使用

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

### 基本用法

:::demo
```html

<template>
    <div>
        {{selection}}
        <el-button @click="getSelection()">获取选择数据</el-button>
        <su-table-check-sort
            ref="multipleTable"
            :data="tableData"
            row-key="id"
            :across="true"
            :disabled-ids="[]"
            @selection-change="selectionChange"
            @sortChange='sortChange'
        >
            <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-sort>
        <su-pagination :getPage="getPage" :page.sync="page"></su-pagination>
    </div>
</template>

<script>
export default {
    components: {
        seTableCheckSort,sePagination
    },
    data () {
        return {
            selection: [{id: '1'}],
            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>1?Math.floor(Math.random()*1000):1;
            for (let i = 0; i < 10; i++) {
                list.push({
                    id: baseId+i,
                    name: "name"+ i + baseId
                })
            }
            vm.tableData = list;
        },
        async getSelection(){
            let multipleTable = await this.getRef("multipleTable");
            this.selection = await multipleTable.getSelectionData();
        },
        selectionChange(list,item){
            console.log("选择数据变化：",list,item);
        },
        sortChange({resolve,reject,rowData,newIndex,oldIndex}){
            setTimeout(()=>{
                resolve();
            },3000)
            console.log(arguments)
        }
    }
}
</script>

```
:::

### Table Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data     |  绑定数据           | Array | — | — |
| row-key  | 数据唯一标识的key           | string | — | id |
| all-scroll | 是否整行都能拖拽 | -- | false |
| move-icon | 是否行首位显示拖拽图标 | 为false 则整行拖拽 | true |

### Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| sortChange(ops)| 拖拽回调事件 | {resolve,reject,rowData,newIndex,oldIndex} | -- |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |