选人组件Demo

线上地址

pc: https://webdev.educloud.tencent.com/pc?token=xxx

h5: https://webdev.educloud.tencent.com/h5?token=xxx

依赖

需先安装element-ui、view-design组件

安装

npm安装

npm i people-selector -S

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://static.educloud.qq.com/people-selector-pc/style.css">
<!-- 引入组件库 -->
<script src="https://static.educloud.qq.com/people-selector-pc/index.css"></script>

使用

<template>
  <selector
    :options="selectorOptions"
    ref="selector"
    style="width: 720px">
  </selector>
</template>
<script>
  import Selector from 'people-selector';
  export default {
    components: { Selector },
    data() {
      return {
        selectorOptions: {
          env: 'pro',
          token: 'xxx',
          DepartmentType: '1,2,4,5,6,7,8',
          CheckType: 0,
          ShowUserType: 1,
          IsIncludeBranch: true
        }
      }
    }
  }
</script>

options参数说明

| 参数 | 类型 | 示例 | 是否必填 | 默认值 | 说明 | | :---: | :---: | :--- | :--- | :----: | :---- | | env | String | pro | 否 | pro | 智慧校园环境，dev（开发）、test（测试）、pre（预发布）、pro（正式）| | token | String | ogUSuKxIZqvyorzUsIUXQApuiXHKBQCM | 是 | 无 | 智慧校园登录态token | | DepartmentType | String | 1,2,3 | 是 | 否 | 组织架构类型 0学校 1学生 2教职工 4校友 5退休教师 6临时组 7虚拟组 8课程班 | | CheckType | Integer | 0 | 是 | 否 | 控制是否可勾选 0架构和用户均可勾选 1只用户可勾选 2只架构可勾选 3只班级可勾选| | ShowUserType | String | 1 | 是 | 否 | 控制用户是否显示 0不显示用户 1显示架构用户 2班级节点用户显示老师 3班级节点用户显示家长 4班级节点用户都显示 | | IsIncludeBranch | String | true | 否 | 否 | 是否展示分校 |