Musertree NPM | npm.io

musertree

组织树（organization tree）
适用场景：适用于PC版，组织数据与用户数据不同步情况下
原理：选择节点组织，选中的节点组织返回组织相关信息，根据组织信息获取用户信息，再传递用户列表到组件显示，用户选择相关用户。

Image text

Build Setup

# install dependencies
npm i musertree

Quick Start

1. 全局引入
import muserTree from 'musertree'
Vue.use(muserTree)


2. 组件内部使用
import muserTree from 'musertree'
components:{muserTree}

demo

 <muser-tree
                :propData='initData'
                :defaultProps="propName"
                v-model="result"
                :isCheckUsers="true"
                @handleConfirm="handleConfirm"
                @handleUser="handleUser"
                :userTree="userTree"
                :isMultiple="true"
    />

export default {
      name: "musertree",
      data(){
        return {
          initData:[
            {
              deptName:'1-1',
              pid:'0',
              deptId:'001'
            },
            {
              deptName:'2-1',
              pid:'001',
              deptId:'0011'
            },
            {
              deptName:'2-2',
              pid:'001',
              deptId:'0012'
            }
          ],
          userLists:[
            {"userCode":"1234","zzdUserName":"赵某某"},
            {"userCode":"12345","zzdUserName":"赵某某2"}
          ],
          propName:{
            "zzdUserName": 'zzdUserName',
            "deptName": 'deptName',
            "deptId":'deptId',
            "userCode":'userCode',
            "parentId":'pid'
          },
          result:[],
          userTree:[],
        }
      },
      components:{
        muserTree
      },
      methods:{
        handleConfirm(value){
          console.log(value)
        },
        handleUser(value){
          this.userTree=this.userLists
        }
      }
    }

Attributes

propName	means	类型	默认	是否必填
v-model	返回值	array	[]	是
isCheckUsers	是否选择人员（与userTree一起使用）	boolean	false	否
userTree	人员数据（与isCheckUsers一起使用）	array	[]	否
isMultiple	是否多选	boolean	false	否

Props

参数	说明	类型	默认	是否必填
propData	初始组织树数据	array	[] （见下方示例）	是
defaultProps	属性值参数	Object	{} （见下方示例）	否

defaultProps 参数

参数	说明	类型	默认
zzdUserName	指定用户名标签为节点对象的某个属性值	string	zzdUserName
deptName	指定组织名标签为节点对象的某个属性值	string	deptName
deptId	指定组织id标签为节点对象的某个属性值	string	deptId
userCode	指定用户id标签为节点对象的某个属性值	string	userCode
parentId	指定当前数据父级标签为节点对象的某个属性值	string	parentId

defaultProps示例

{
    "zzdUserName": 'zzdUserName',
    "deptName": 'deptName',
    "deptId":'deptId',
    "userCode":'userCode',
    "parentId":'parentId'
}

propData 说明

一维数组，默认一级为节点父级标签为 0 时

propData 示例

[
    {
      deptName:'1-1',
      pid:'0',
      deptId:'001'
    },
    {
      deptName:'2-1',
      pid:'001',
      deptId:'0011'
    },
    {
      deptName:'2-2',
      pid:'001',
      deptId:'0012'
    }
  ]

Events

name	means	Callback
handleConfirm	当前选中点击“确定”触发的事件	当前选中返回值，Array格式，返回值绑定v-model
handleUser	选择用户模式下，isCheckUsers为true生效，选中组织时触发的事件，与userTree绑定使用	返回当前选中组织信息，用户需传回用户数据（userTree）

vue

@everything-registry/sub-chunk-2220 @infinitebrahmanuniverse/nolb-mus

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago