OrganizationPicker 组织选择

基础用法

<template>
  <div class="demo-wrap">
    <plv-organization-picker
      :tree-data="data"
      :search-callback="search"
      v-model="value"
      @open-node="handleOpenNode"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      data: [{
        id: '1',
        label: '一级 1',
        children: [{
          id: '1-1',
          label: '二级 1-1',
          children: [{
            id: '1-1-1',
            label: '三级 1-1-1'
          }]
        }]
      }, {
        id: '2',
        label: '一级 2',
        children: [{
          id: '2-1',
          label: '二级 2-1',
          children: [{
            id: '2-1-1',
            label: '三级 2-1-1'
          }, {
            id: '2-1-2',
            label: '三级 2-1-2'
          }]
        }, {
          id: '2-2',
          label: '二级 2-2'
        }]
      }, {
        id: '3',
        label: '一级 3',
        children: [{
          id: '3-1',
          label: '二级 3-1',
          children: [{
            id: '3-1-1',
            label: '三级 3-1-1'
          }]
        }, {
          id: '3-2',
          label: '二级 3-2',
          children: [{
            id: '3-2-1',
            label: '三级 3-2-1'
          }]
        }]
      }, {
        id: '4',
        label: '一级 4',
        children: [{
          id: '4-1',
          label: '二级 4-1',
        }]
      }]
    };
  },

  methods: {
    handleOpenNode(data) {
      console.log(data);
    },

    search(val) {
      console.log(val);
      return {
        departments: [
          {
            id: '3',
            label: '一级 3',
          },
          {
            id: '3-2',
            label: '二级 3-2',
          }
        ],
        staffs: [
          {
            id: '4-1',
            label: '二级 4-1',
          }
        ],
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.demo-wrap {
  width: 650px;
  height: 368px;
}
</style>

显示代码

OrganizationPicker Props

参数	说明	类型	可选值	默认值
value / v-model	绑定的选中值	Array	-	[]
treeData	树状数据	Array	-	[]
treeProps	竖型控件参数	Object	-	{}
departmentIcon	部门图标名	String	-	department
staffIcon	成员图标名	String	-	staff
searchCallback	搜素回调方法	Function	-	-
checkboxDisabled	禁用复选框方法	Function	-	-
disabledDepartment v2.19.0	是否禁用部门选择	Boolean	-	false

OrganizationPicker Events

事件名称	说明	回调参数
open-node	打开树状节点回调	{ node, isLeaf, level }