Vue 实现封装combogrid表格网格（Easyui框架有类似的）（一）

combogrid效果图

combogrid的介绍

组合网格（combogrid）把可编辑的文本框和下拉数据网格面板结合起来，用户可以从下拉数据网格面板中快速查找和选择。组合网格（combogrid）提供了选择某个项目的键盘导航支持。

combogrid应用场景

combogrid类似选择输入的下拉表单，比如下拉菜单，但是和下拉菜单不同的是，选择的选项是一个表格，相当于一个小型的组件页面了。因此，它主要面对的对象是可选择性比较多的数据或者说是一整个数据表。

combogrid需要封装的组件

（1）i-whiteBoad.vue 白板公共组件

（2）i-combogrid.vue 组合网格公共组件

（3）i-form.vue 单个表单公共组件

（4）i-table.vue 表格公共组件

（5）i-toolBar.vue 表头按钮的公共组件（忽略）

combogrid需要使用到的封装js文件

（1）publicForm.js 封装基础表单组件框架的js文件

（2）whiteBoard.js 白板组件的动态位置js文件

一、i-whiteBoad.vue白板的封装

白板组件很简单，就是一个白色的面板，用作combogrid或者其他组件的容器，并且可以动态改变弹出的位置。
template

<template>
<transition :name="transionName">
    <div class="white-dialog" v-if="dialogVisible" :dialogVisible="dialogVisible" 
        :target="target" :style="fix"  :id="timeValue">
        <slot></slot>
    </div>
</transition>
</template>

script

import {
   EventBus} from '../modules/event-bus.js' // 引入事件总线
import whiteBoard  from '../modules/whiteBoard.js' // 引入白板
export default