# smileTable

**Repository Path**: fengkaiyan/smileTable

## Basic Information

- **Project Name**: smileTable
- **Description**: 根据配置数据生成table表
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# table组件

##组件功能
  根据配置数据生成table表。

## 组件使用及传参
使用组件时，代码如下

```
<SmileTable 
  @click="handleClick"  
  :data='data'>
</SmileTable>
            
```
|参数名|类型|备注|
|--|:--:|--:|
|click|function|组件点击事件，当data中的callback为string类型时触发|
|data|object|按钮data配置数据|


## table组件data配置数据结构及参数说明

```
{
  type: 'SmileTable', // 组件名称
  id: '', // 组件ID
  className: '', // 组件样式
  tableHeader: [
    {
      prop: '',
      sortable: false,
      label: '',
      order: '',
      type: '',
      minWidth: '',
      list: [
            { text: '編輯',
              className: 'btn-default',
              icon: 'icon-edit',
              callback: (data) => {
                dispatch('OPEN_DIALOG_PANEL', data)
              }
            },
            { text: '刪除',
              className: 'btn-warning',
              icon: 'icon-delete',
              callback: (data) => {
                let id = data.entityId
                dispatch('DELETE_DEVICE', id)
              }
            }
          ]
    }
  ],
  tableData: [
    {
      key:value,
      key1:value1
    }
  ],
  stripe: true,
  selection: {
    show: false,
    selectCallback: '',
    ids: []
  }
}

```

|参数名|二级参数|类型|备注|
|--|:--:|--:|--:|
|id||string|页面唯一，同一页面内不能存在id相同的两个组件|
|type||string|组件类型，应用唯一，表格组件该值固定为‘SmileTable’|
|className||string|表格样式名|
|tableHeader||array|表格头部配置数据|
||prop|string|表格列key值，用于在tableData中匹配列数据|
||sortable|boolean|表格列数据是否可排序|
||label|string|表格列头部文本|
||order|number|表格列排序索引|
||type|string|表格列数据展示类型，空表示直接展示，可选button-list、radio、input三种|
||minWidth|string|表格列百分比宽度|
||list|array|表格列数据展示组件列表，在type为button-list、radio、input时生效|
|tableData||array|表格展示数据，展示格式为key：value对象组成的数组，key值对应tableHeader的prop值|
|stripe||boolean|表格是否单双行交错样式|
|selection||object|表格复选框列配置数据|
||show|array|表格复选框列展示状态|
||selectCallback|function|选中状态发生改变时的回调函数|
||ids|array|选中行ID|