# wh-table-group

> A Vue.js project

Latest version **0.0.1-d** (published 2019-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install wh-table-group
pnpm add wh-table-group
yarn add wh-table-group
bun add wh-table-group
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-d |
| Published | 2019-10-07 |
| First published | 2019-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | shadow |
| Maintainers | wuhong |

## Links

- npm: https://www.npmjs.com/package/wh-table-group
- Repository: https://github.com/stack-wuh/my-table
- Homepage: https://github.com/stack-wuh/my-table#readme
- Issues: https://github.com/stack-wuh/my-table/issues
- npm.io page: https://npm.io/package/wh-table-group

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [element-ui](https://npm.io/package/element-ui.md) ^2.12.0

## Recent versions

- 0.0.1-d (latest) — 2019-10-07
- 0.0.1-c — 2019-10-06
- 0.0.1-b — 2019-09-24
- 0.0.1-a — 2019-09-24
- 0.0.1 — 2019-09-24

## README

# my-table

> A Vue.js project

## Preview

```bash
# clone
git clone git@github.com:stack-wuh/my-table.git

cd example

npm install

npm run dev
```

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 使用

### WTable
#### Props
| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| header | 是否展示Table的header部分 | Boolean | true |
| footer | 是否展示Table的Footer部分 | Boolean | true |
| columns | 提供迭代的TableColumn的列表 | Array | [] |
| data | Table的元数据 | Array | [] |
| border | 是否展示Table的边框 | Boolean | true |
| stripe | 是否Table的斑马纹 | Boolean | true |
| isShowPrefix | 是否展示表格第一列的功能列 | Boolean | true |
| textAlign | 对齐的位置 | String | center |

#### Events 
> 按钮点击或者其他事件全部由v-on代理了, 使用了MySearchButtonGroup组件, 具体上传的事件名全部通过ref属性自定义, 使用方法如下: 
```javascript
import WTable from 'wh-table'
Vue.use(WTable)

const btns = [
  {
    text: 'down',
    ref: 'down'
  },
  {
    text: 'search',
    ref: 'search'
  },
  {
    text: 'any',
    ref: 'any'
  }
]
```
```html
  <w-table
    @down="handleDown"
    @search="handleSearch"
    @any="handleAny">
  </w-table>
```

#### Slot
| name | 说明 |
| :-- | :-- |
| header | 表格Header区域 |
| footer | 表格的footer区域 |

### WTabelHeader 
#### Props
| 参数 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| name | 表格左上角的文本 | String | none |

#### Slot
| name | 说明 |
| :-- | :-- |
| right | 为表格Header区域预留了功能区域, 可以在这里添加按钮或者是表单, 推荐搭配MySearchGroup组件使用 |


### WTableColumn
> 由自定义JSON文件迭代渲染, 使用如下: 
```javascript
const List = [
  {
    label: '姓名',
    field: 'name',
    type: ['default', undefined, null], // 以上三种情况可以不填
  },
  {
    label: 'XXX',
    field: 'custom',
    type: 'image'
  },
  {
    label: 'XXX',
    field: 'custom',
    type: 'switch',
  },
  {
    label: 'XXX',
    field: 'custom',
    type: 'tag',
    transfer: {
      value1: mapValue1,
      value2: mapValue2
    },
    types: {
      value1: 'success',
      value2: 'info'
    }
  },
  {
    label: 'XXX',
    field: 'custom',
    type: 'component',
    component: VueComponent
  },
  {
    label: 'XXX',
    type: 'button',
    list: [
      {
        text: 'up',
        ref: 'up'
      },
      {
        text: 'down',
        ref: 'download'
      }
    ]
  }
]
```
#### type == [default, null, undefined]
| 参数 | 说明 |
| :-- | :-- |
| default |  只能渲染普通文本 |

#### type == image[, images]
| 参数 | 说明 |
| :-- | :-- |
| image | 只能渲染一张图片, 如: { url: 'https:www.baidu.com' } | 
| images | 可以渲染多张图片, 期待后台返回一个数组, 如: { url: ['/image1.png', '/imgs2.png'] } |

#### type == switch
| 参数 | 说明 |
| :-- | :-- |
| switch | 使用element的Switch组件, 一个双向开关, 属性同element |

#### type == tag
| 参数 | 说明 |
| :-- | :-- |
| tag | 用于多状态枚举, 后台返回值需要前端映射, 提供一个transfer对象用于渲染， types对象用于绑定展示type |

#### type == component
| 参数 | 说明 |
| :-- | :-- |
| component | 使用Vue中的Component标签, 自定义满足需求的组件, 组件声明如下 |

```javascript
const VueComponent = {
  props: ['scope'],
  template: `
    <div class="wrap">{{scope}}</div>
  `
}
const List = [
  {
    label: 'aaa',
    type: 'component',
    component: VueComponent
  }
]
```
```html
  <component :is="List.component" v-bind="List" :scope="List"></component>
```

#### type == button
> 搭配MySearchButtonGroup 使用

---
_Source: https://npm.io/package/wh-table-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._