# webkf-core-lookup

> webkf-core-lookUp 码表控件

Latest version **1.1.18** (published 2021-08-18) · 0 weekly downloads

## Install

```sh
npm install webkf-core-lookup
pnpm add webkf-core-lookup
yarn add webkf-core-lookup
bun add webkf-core-lookup
```

## 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.1.18 |
| Published | 2021-08-18 |
| First published | 2021-08-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 11 |
| Unpacked size | 317.5 KB |
| Known vulnerabilities | 0 (+13 in 5 direct dependencies) |
| Install scripts | no |
| Author | gaojiapeng |
| Maintainers | justlikewind |

## Links

- npm: https://www.npmjs.com/package/webkf-core-lookup
- npm.io page: https://npm.io/package/webkf-core-lookup

## Dependencies (11)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [bootstrap](https://npm.io/package/bootstrap.md) 3.3.7
- [node-sass](https://npm.io/package/node-sass.md) ^4.11.0
- [element-ui](https://npm.io/package/element-ui.md) ^2.4.11
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.2
- [ag-grid-vue](https://npm.io/package/ag-grid-vue.md) 20.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.1.0
- [ag-grid-community](https://npm.io/package/ag-grid-community.md) 20.0.0
- [ag-grid-enterprise](https://npm.io/package/ag-grid-enterprise.md) 20.0.0
- [babel-plugin-component](https://npm.io/package/babel-plugin-component.md) ^1.1.1
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^7.3.0

## Recent versions

- 1.1.18 (latest) — 2021-08-18

## README

## 介绍
webkf-core-lookUp 码表控件

## 更新日志
> * 1.1.2 新增表格配置
> * 1.1.1 增加稳定性
> * 1.0.8 [增加v-model 双向绑定](#v1_0_8)
> * 1.0.6 [使用方法](#v1_0_6)
> * 1.0.0 [使用方法](#v1_0_0)

## 安装教程
```
# 指定npm服务器
npm set registry http://www.xhzq.com:4873
# 安装依赖包
npm i webkf-core-lookup -S
# 查看更新版本
npm view webkf-core-lookup versions
# 更新到指定版本
npm install webkf-core-lookup@X.X.X
```
### 1. 属性

| 参数                                  | 说明              | 类型        |可选值               | 默认值 |
| :----                                 | :----             | :----       |:----                | :---- |
| config                                | 配置              | Boolean     | -                   | true  |
| size                                  | 大小              | Boolean     | -                   | true  |
| value                                 | 表格调试模式      | Boolean     | -                   | true  |
| columnDefs                            | 列定义            | Boolean     | -                   | false  |
| rowData                               | 行数据            | Boolean     | -                   | false  |
| bindColumn                            | 使用整行分组      | Boolean     | -                   | false  |
| allowGridConfig                       | 允许表格配置      | Boolean     | -                   | false  |
| gridConfig                            | 表格配置          | Boolean     | -                   | false  |
| isReadonly                            | 是否只读          | Boolean     | -                   | false  |

### 2. 事件
| 方法名                 | 说明
| :----                 | :----
|              | 
|              | 

### 3. 方法
| 方法名       | 说明       | 返回类型      |参数     | 默认值 |
| :----        | :----      | :----         |:----    | :---- |
| getvalue     | 获得值     | Object         | -       |  -   |
| clearInput   | 清空       | Void         | -       |  -   |


## <span id="v1_1_2">v-model 新增表格配置</span>
``` 属性
      表格配置参数可以和表格属性混用
      表格配置参数不包括 'rowData' 属性
      如果表格配置参数属性与表格属性相同时表格配置属性生效
      
      :allowGridConfig="true"   //是否启用表格配置参数
      :gridConfig="gridConfig"  //表格配置参数
      
      DEMO
       this.gridConfig = {
            'showToolbar': true,
            'defaultColDef': this.defaultColDef,
            'columnDefs': this.columnDefs,
            'rowSelection': this.rowSelection,
            'frameworkComponents': this.frameworkComponents,
            'treeData': true,
            'getDataPath': this.getDataPath,
            'animateRows': true,
            'autoGroupColumnDef': this.autoGroupColumnDef,
            'gridOptions': this.gridOptions
          }
      
```

## <span id="v1_0_8">v-model 使用方法</span>
```
    v-model="testData"    // 绑定的id
    :config="config"   // 绑定配置

  #data: {
   testData: 1
   config: {
          id: 'id', // 要绑定id 的字段
          label: 'label'  // 要显示的字段
        },
  }

  # 返回行数据，不需要行数据可忽略
  @getvalue 更改为，返回当前行数据
   methods: {
      getvalue (data) {
        this.rowItem = data
      }
    }
```


## <span id="v1_0_6">更新日志</span>
```
解决离开无法自动收起BUG
```

## <span id="v1_0_0">使用方法</span>
```
# 使用弹窗
import lookUp from 'webkf-core-lookup'

// 全局引用
Vue.component(lookUp.name, lookUp)
// 局部引用
  components: {
    lookUp
  }
```
##test.vue
```
<template>
    <lookUp
    style="height: 50px;width:300px;"
    :inputText="testData"
    :columnDefs="columnDefs"
    :rowData="rowData"
    @RetrueData="getvalue"
    ></lookUp>
</template>

<script>
import lookUp from '@/lib'
export default {
  name: 'index',
  data () {
    return {
      testData: '',
      columnDefs: [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'}
      ],
      rowData: [
        { make: 'Toyota1', model: 'Celica' },
        { make: 'Ford', model: 'Mondeo' },
        { make: 'Porsche', model: 'Boxter' }
      ]
    }
  },
  components: {
    lookUp
  },
  methods: {
    getvalue (data) {
      this.testData = data.make
    }
  }
}
</script>

<style scoped>

</style>
```

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