w-member-select

:::demo

import { ref, defineComponent } from '@vue/composition-api'
import WMemberSelect from '@weier/w-member-select'

let i = 0

export default defineComponent({  
  setup() {

    const list = ref([])

    const val = ref('')

    const loadNode = (node, resolve) => {
      setTimeout(() => {
        i++
        let isLeaf = false
        if (i > 3) {
          isLeaf = true
        }
        resolve([{
          label: "子部门1_"+i,
          value: "name_" + Math.random(),
          icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
          isLeaf
        },
        {
          label: "子部门2_"+i,
          value: "name_" + Math.random(),
          icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
          isLeaf
        }])
      }, 400)
    }

    const remoteMethod = (query, resolve) => {
      setTimeout(() => {
        resolve([
          {
            label: "个人",
            children: [{
              icon: "el-icon-s-custom",
              label: "苏定",
              value: "bumen + value",
              desc: "描述内容，在右侧展示",
              isLeaf: true
            }],
          }, {
            label: "部门",
            children: [{
              label: "财务部",
              value: "name",
              icon: "el-icon-folder",
              desc: "描述内容，在右侧展示",
              isLeaf: false
            }]
          }
        ])
      }, 300)
    }

    return () => (
      <div>
        <WMemberSelect
          value={list.value}
          onChange={e => list.value = e}
          title="选择员工"
          queryPlaceholder="请输入成员或部门"
          selectedText="已选择的部门或成员"
          loadNode={loadNode}
          remoteMethod={remoteMethod}
        >
          <el-input
            placeholder="请点击选择员工"
            readonly
          />
        </WMemberSelect>
      </div>
    )
  }
})

:::

Install

npm i w-member-select --save-dev

import WMemberSelect from 'w-member-select'

Attributes

*v-model

选中的节点返回的数组

multiple

多选状态，true多选，false单选

title

模态窗的标题

queryPlaceholder

模态窗左侧搜索框的placeholder内容

selectedText

模态窗右侧标题

showTreeData

搜索的时候是否显示树形结构 布尔型 默认false 不显示树形结构

showSelectedNum

是否显示已选择总数 布尔型 默认false 不显示

treeData

所有节点数据，直接加载，如果load-node存在，则load-node优先级更高

*load-node

加载子节点数组, node被展开的节点，第0级默认直接加载展开，示例如下

loadNode (node, resolve) {
  if(node.level === 0){
    // 根节点
  } else {
    // node.data为节点数据
  }
  setTimeout(() => {
    i++
    let isLeaf = false
    if (i > 3) {
      isLeaf = true
    }
    resolve([{
      label: "子部门a",
      value: "name1",
      disabled: false,
      icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
      isLeaf
    },
    {
      label: "子部门b",
      value: "name2",
      disabled: false,
      icon: isLeaf ? "el-icon-s-custom" : "el-icon-folder",
      isLeaf
    }])
  }, 400)
}

*remote-method

搜索返回结果, query为搜索内容，示例如下：

// 搜索返回结果
remoteMethod (query, resolve) {
  setTimeout(() => {
    resolve([
      {
        label: "个人",
        children: [{
          icon: "el-icon-s-custom",
          label: "苏定",
          value: "bumen + value",
          desc: "描述内容，在右侧展示",
          disabled: false,
          isLeaf: true
        }],
      }, {
        label: "部门",
        children: [{
          label: "财务部",
          value: "name",
          icon: "el-icon-folder",
          desc: "描述内容，在右侧展示",
          disabled: false,
          isLeaf: false
        }]
      }
    ])
  }, 300)
}

append-to-body

boolean, dialog的是否添加到body

dialogWidth

string, dialog的width

handle-confirm

弹窗确定回调(非必要) :handle-cancel="handleConfirm"

handleConfirm (list, done) {
  // 选中的数据
  console.log(list)
  // done则正常关闭模态窗
  done()
}

handle-cancel

弹窗取消回调(非必要) :handle-cancel="handleCancel"

handleCancel (done) {
  console.log("关闭")
  done()
},

disabled

boolean, 是否静默弹窗选择

// 关闭弹窗判断(非必要)
handleConfirm (list, done) {
  console.log(list)
  // done则正常关闭模态窗
  done()
}

select-leaf-only

true: 只能选择叶子节点， 默认false

Method

getTreeNodes 获取node

TODO: description