Dew-table NPM | npm.io

dewTable

介绍

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

软件架构

软件架构说明

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

npm i dew-table
npm i element-ui -S
npm install  --save  vxe-table@2.9.26
npm install  --save  xe-utils@2.8.1

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