## table 表格单选

> 大部分使用方法同element框架中的table，更多用法及示例可查看element官网

### 导入使用

```code[javascript]
import seTableRadio from "ss-universal-client-web/comp/data/su-table-radio";
```
### 基本用法

:::demo
```html

<template>
    <div>
        {{selection}}
        <el-button @click="getSelection()">获取选择数据</el-button>
        <su-table-radio
            :data="tableData"
            row-key="id"
            :disabled-ids="[12987123]"
            ref="table"
            @selection-change="selectionChange"
        >
            <el-table-column type="index" :index="(index)=>{return index+1}"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column sortable="custom" prop="amount1" label="数值 1（元）"></el-table-column>
            <el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
            <el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-link type="primary">查看</el-link>
                    <el-link type="warning">编辑</el-link>
                    <el-link type="danger">删除</el-link>
                </template>
            </el-table-column>
        </su-table-radio>
    </div>
</template>

<script>
export default {
    components: {
        seTableRadio
    },
    data () {
        return {
            selection: null,
            tableData: [{
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '12987124',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }, {
                id: '12987125',
                name: '王小虎',
                amount1: '621',
                amount2: '2.2',
                amount3: 17
            }, {
                id: '12987126',
                name: '王小虎',
                amount1: '539',
                amount2: '4.1',
                amount3: 15
            }],
        }
    },
    async mounted(){
        this.selection = this.tableData[0];
        let ref = await this.getRef("table");
        ref.setSelectionData(this.selection);
    },
    methods:{
        async getSelection(){
            let multipleTable = await this.getRef("table");
            this.selection = multipleTable.getSelectionData();
        },
        selectionChange(item){
            console.log("选择数据变化：",item);
        }
    }
}
</script>


```
:::

### Table Attributes

| 参数 | 说明       | 类型  | 可选值 | 默认值 |
| ---- | ---------- | ----- | ------ | ------ |
| data | 显示的数据 | array | —      |        |
| row-key | 唯一标识key | String | —      |    -    |
| disabled-ids     |  禁止选择的数据项id数组,数据更新前设置          | array | — | [] |
| row-selection | 行点击是否能选中 | Boolean | —      |    true    |
|      |            |       |        |        |

### Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| setSelectionData(item) | 设置选中数据 | 选择数据 | -- |
| getSelectionData() | 获取选中数据 | -- | item |
| clearSelection() | 清除选中数据 | -- | -- |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| selection-change(data) | 用户触发、当选择项发生变化时会触发该事件 | item:当前选择数据 |