介绍

webkf-core-lookUp 码表控件

更新日志

• 1.1.2 新增表格配置
• 1.1.1 增加稳定性
• 1.0.8 增加v-model 双向绑定
• 1.0.6 使用方法
• 1.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 [email protected]

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 | - | - |

v-model 新增表格配置

      表格配置参数可以和表格属性混用
      表格配置参数不包括 '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
          }
      

v-model 使用方法

    v-model="testData"    // 绑定的id
    :config="config"   // 绑定配置

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

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

更新日志

解决离开无法自动收起BUG

使用方法

# 使用弹窗
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>