# sy-checkbox

> 基于element-ui的Checkbox二次封装

Latest version **0.1.7** (published 2019-09-04) · 0 weekly downloads

## Install

```sh
npm install sy-checkbox
pnpm add sy-checkbox
yarn add sy-checkbox
bun add sy-checkbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2019-09-04 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 40.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Siwen |
| Maintainers | siwencode |

## Links

- npm: https://www.npmjs.com/package/sy-checkbox
- npm.io page: https://npm.io/package/sy-checkbox

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.3

## Recent versions

- 0.1.7 (latest) — 2019-09-04
- 0.1.6 — 2019-09-04
- 0.1.5 — 2019-09-04
- 0.1.4 — 2019-09-04
- 0.1.3 — 2019-09-04
- 0.1.2 — 2019-09-02
- 0.1.1 — 2019-09-02
- 0.1.0 — 2019-09-02

## README

<!--
 * @Author: Siwen
 * @Date: 2019-09-02 16:32:52
 * @LastEditors: Siwen
 * @LastEditTime: 2019-09-04 11:42:47
 * @Description: 
 -->
# sy-checkbox

## 基于element-ui的Checkbox,用于Table组件的列控制

### 安装
```
npm install sy-checkbox -S

// 在 main.js 引入并注册
import syCheckbox from 'sy-checkbox'
import 'sy-checkbox/lib/sy-checkbox.css'
Vue.use(syCheckbox)
```
### 在组件中使用
```
<template>
  <div class="home">
    <div class="table_box">
      <sy-checkbox :options="tableColumn" @change="changeCheckbox"></sy-checkbox>
      <el-table :data="tableData">
        <!-- 也可在v-for中判断 v-if="checkedColumn.includes(item.label)" -->
        <el-table-column v-if="checkedColumn.includes('日期')" prop="date" label="日期"></el-table-column>
        <el-table-column v-if="checkedColumn.includes('姓名')" prop="name" label="姓名"></el-table-column>
        <el-table-column v-if="checkedColumn.includes('年龄')" prop="age" label="年龄"></el-table-column>
        <el-table-column v-if="checkedColumn.includes('性别')" prop="gender" label="性别"></el-table-column>
        <el-table-column v-if="checkedColumn.includes('地址')" prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      tableColumn: ['日期', '姓名', '年龄', '性别', '地址'],
      checkedColumn: [],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          age: '18',
          gender: '男',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          age: '18',
          gender: '男',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          age: '18',
          gender: '男',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '18',
          gender: '男',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    changeCheckbox(options) {
      this.checkedColumn = options
    }
  },
};
</script>
<style lang='scss'>
.home {
  .table_box {
    position: relative;
  }
}
</style>
```

### 文档说明
|参数名|必填|类型|说明|默认值|
|:----|:---|:----- |:-----|:-----|
|options|是|Array|选项数组|--|
|width|否|String、Number|宽度|最小宽度 120px|
|show-check-all|否|Boolean|是否显示全选按钮|false|
|is-check-all|否|Boolean|是否默认全选|true|
|trigger|否|String|触发方式：click/focus/hover/manual|click|
|placement|否|String|popper显示的位置：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end|bottom-end|
|change|是|Function|回调函数|已选项数组|

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