# vis-form-control

> a form-control for vue

Latest version **1.0.8** (published 2017-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vis-form-control
pnpm add vis-form-control
yarn add vis-form-control
bun add vis-form-control
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2017-02-16 |
| First published | 2017-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fe-vis-vipshop |
| Maintainers | fe-vis-vipshop |
| Keywords | vue, form-control |

## Links

- npm: https://www.npmjs.com/package/vis-form-control
- npm.io page: https://npm.io/package/vis-form-control

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2017-02-16
- 1.0.7 — 2017-02-16
- 1.0.6 — 2017-02-15
- 1.0.1 — 2017-02-15
- 1.0.0 — 2017-02-10

## README

# vue-sheet
> A vis-vui-table component for Vue.js.

## install
```sheet
  npm install vue-sheet
```

## Usage
```javascript
import Vue from 'vue'
import {Sheet, Cell} from 'vue-Sheet'

Vue.use(Sheet)
vue.use(Cell)
```

or

```javascript
import Vue from 'vue'
import { Sheet, Cell } from 'vue-Sheet'

Vue.component('Sheet', Sheet)
Vue.component('Cell', Cell)
```


### Table Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 显示的数据 | array | — | — |
| checkValue | 选择对应的值（没有这个属性，默认没有全选功能）属性。 | Array | - | - |
| checkKey | 对应data哪个key的做为选择值。 | String | - | - |



### column Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| type | 对应列的类型。 | string | string/link/button/box... | — |
| header | 显示的标题 | string | — | — |
| sources | 对应列内容的字段名, 或者组件对应的属性 | string/Object | — | — |
| style | 对应列的样式 | object | — | — |
| class | 对应列的class | string | — | — |
|inline-template| 在标签内自定义元素 | — ||—|


## type && sources

  type 可以是默认提供的string/link/button/box 或者是自定义的组件，sources对应着其组件的属性值

  sources中可以读取到data对应每个列上的值，通过在字符串前面添加"$"区分是字符串，还是data对应key下的值,如 :sources = '{text:$key}'

### string
 
 type = "string" 显示一个字符串，对应的 :sources = '{text:$key}',可以读取到data下的值，sources可以简写为 sources = '$key'

### link

 type = "link" 一个连接，:sources = '{text:$key, href: {...}}' href 的参数对应与v-link相同

### button

 type = "button" 一个按钮 :sources = '{text:$key, click:(itemData, index)=>{} }' click 为点击事件，对应的两个参数第一个是当前列的值，第二个是当前列的索引

### other

 除了提供的几个默认的type外，也可以在type写入中引入的组件的组件名，sources则是这个组件对应的属性值，基中会这个组件默认传入data属性，这个列对应的值

##example
```html
<template>
  <div id="demo">
    <h1>Sheet</h1>
    <sheet class="table" :check-value = "checkValue" :records="students" class="sheet">
      <column header="Name" class="name" key="name"></column>
      <column header="Age" key="age"></column>
      <column header="option" type="link"  :option="{target: '_blank', text: '编辑', path: '/vis/normal/:id', params: {id: '$id'}, queries: {action: 'save'}}"></column>
      <column header="Name+Age" class="desc" inline-template :option="{click: hello}">
        <p>Name: {{ $value.name }}</p>
        <p>Age: {{ $value.age }}</p>
        <button @click="option.click($value.name)">Hello</button>
      </column>
    </sheet>
  </div>
</template>
<script>
import {Column, Sheet} from '../../packages/sheet'
export default {
  components: {
    Column,
    Sheet
  },
  data: function () {
    return {
      students: [
        {id: '339', name: 'hal', age: 30},
        {id: '730', name: 'jim', age: 10},
        {id: '731', name: 'green', age: 20},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
        {id: '882', name: 'jerry', age: 35},
         {id: '882', name: 'jerry', age: 35},
          {id: '882', name: 'jerry', age: 35},
           {id: '882', name: 'jerry', age: 35},
            {id: '882', name: 'jerry', age: 35},
             {id: '882', name: 'jerry', age: 35},
              {id: '882', name: 'jerry', age: 35}
      ],
      checkValue: []
    }
  },
  methods: {
    hello (name) {
      window.alert('hello' + name)
    }
  }
}
</script>


```

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