dewTable

介绍

大数据树形组件和选择框组件

软件架构

软件架构说明

安装教程 需要同时安装vxe-table和element ui的组件

npm i dew-table
npm i element-ui -S
npm install  --save  [email protected]
npm install  --save  [email protected]

在 main.js 中写入以下内容：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css' 
import 'vxe-table/lib/style.css'
import 'vxe-table/lib/style.css'
import dewTable from 'dew-table'

Vue.use(VXETable)
Vue.use(ElementUI)
Vue.use(dewTable)

使用说明

树形组件

<dew-tree :data="data" label="labelName" children="child"></dew-tree>

| 属性 | 说明 | 默认值 | | ------ | ------ | ------ | | data | 数据 | | | children | 子节点属性 | children | | label | 指定节点标签为节点对象的某个属性值 | label | | id | 节点的唯一标识 | id | | height | 高度 | 300px | | expand | 默认全部展开 | false | | checkBox | 开启复选功能 | false | | expandData | 默认展开节点 | | | filterMethod | 自定义搜索方法 | |

| 方法名 | 说明 | 参数 | | ------ | ------ | ------ | | filter | 默认过滤 | 接收object的参数，该参数会在 filterMethod 中作为第一个参数 | | getCheckNode | 获得复选框选择项 | | | getExpandNode | 获得显示的节点 | |

| 事件 | 说明 | 回调参数 | | ------ | ------ | ------ | | node-click | 节点被点击时的回调 | 节点对应的 Node | | check | 当复选框被点击的时候触发 | 共两个参数节点对应的 Node，复选框的Boolean值 |

选择器组件

<dew-select :result.sync="model" :data="data"></dew-select>

| 属性 | 说明 | 默认值 | | ------ | ------ | ------ | | result | 输入框绑定数据 | | | data | 下拉数据 | |
| value | 选项的值 | value | | label | 选项的标签 | label |
| multiple | 是否多选 | false | | filterMethod | 自定义搜索方法 | (val,item)=>{return item.label.indexOf(val)!=-1} |

| 事件 | 说明 | 回调参数 | | ------ | ------ | ------ | | click-option | 点击选项时的回调 | 对应的选项 |

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request