mutiple-select

Project setup

npm install mutiple-select-arkshare

组件使用说用

API

props

| 属性 | 说明 | 类型 | 默认值 | | :----- | :-----| :-----| :-----| | treedata | 组件左边数据对象| Object | 空| | componentData |组件中间区域数据|Object|空| |resultData|右边结果栏显示的默认值|Array|[]| |loading|是否显示组件加载|Boolean|false| |treeLoading|是否显示树加载|Boolean|false| |tableLoading|是否显示表格加载|Boolean|false| |open|树节点是否展开|Boolean|false| |hasAddbtn|树节点后面是否显示添加节点|Boolean|false|

events

|事件名|说明|返回值| |:-----|:-----|:-----| |on-select-tree|点击树节点时触发|当前已选中的节点数组和当前改变的节点数据| |on-change-tree|点击复选框时触发|当前已勾选节点的数组和当前改变的节点数据| |on-click-tree|点击节点时触发|当前点击节点数据| |on-change-page|翻页是触发|当前的页码| |on-change-pageSize|切换每页条数时的回调，返回切换后的每页条数|每页的条数| |on-row-dblclick|表格双击双击行事件|| |on-row-click|表格单击事件当|1、前行的数据 2、index 3、event| |on-select|在多选模式下有效，选中某一项时触发|selection:已选数据 row:刚选择的数据| |on-select-cancel|在多选模式下有效，取消选中某一项时触发|selection:已选数据 row:取消选择的数据| |on-select-all|在多选模式下有效，点击全选时触发|selection：已选项数据| |on-select-all-cancel|在多选模式下有效，点击取消全选时触发|selection：已选项数据| |on-selection-change|在多选模式下有效，只要选中项发生变化时就会触发|selection：已选项数据| |on-change|输入事件|event和input组件实例this| |on-enter|输入框回车事件|event和input组件实例this| |on-search|开启 search 时可用，点击搜索或按下回车键时触发|value和input组件实例this| |getResult|点击添加或者勾选表格行或者删除选中数据触发|返回结果| |treeRenderContent|自定义渲染内容，见示例，回调函数|h,对象包含root 树的根节点;node 当前节点;data 当前节点的数据|

mutipleSelect methods(通过实例调用)

|事件名|说明|参数| |:-----|:-----|:-----| |addOrgItem|添加树节点|当前操作节点数据|

treedata属性说明

| 属性 | 说明 | 类型 | 默认值 | | :----- | :-----| :-----| :-----| |data|可嵌套的节点属性的数组，生成 tree 的数据,id必须要有,datatype为'org',这个字段必须要有|Array|[]| |show-checkbox|是否显示多选框|Boolean|false| |query|模糊匹配字符|String|| |queryStyle|设置匹配字符样式|Object||

componentData属性说明

| 属性 | 说明 | 类型 | 默认值 | | :----- | :-----| :-----| :-----| |columns|表头数组，生成 table 的数据，id必须要有,datatype为'people'|Array|[]| |list|表体数组|Array|[]| | total|页码总条数|Number|0| |pageSize|每页条数|Number|10| |pageNum|当前页码|Number|1| |pageOptions|每页条数切换的配置|Array|[10, 20, 30, 40]| |placeholder|站位文本|String||

resultData属性说明

| 属性 | 说明 | 类型 | 默认值 | | :----- | :-----| :-----| :-----| |string|显示字段，必须要有|String||