人员选择器 (PersonPicker)

支持组织架构选择的复杂业务组件。

配置类型

• personPicker

演示 (Demo)

多选 (Multiple)

点击模拟打开选择框

无数据

人员多选

Value: []

单选 (Single)

点击模拟打开选择框

无数据

人员单选

Value:

模拟接口请求 (Simulated API)

打开对话框后模拟 1s 延迟加载数据

无数据

异步加载

Value: []

示例代码

<!-- 1. 多选 -->
<DynaForm
  v-model="ids"
  :config="{ 
      type: 'PERSONPKR', 
      multiple: true, 
      columns: [{prop: 'name', label: '姓名'}] 
  }"
  :options="deptTree"
  :table-options="userList"
/>

<!-- 2. 单选 -->
<DynaForm
  v-model="id"
  :config="{ 
      type: 'PERSONPKR', 
      multiple: false, 
      columns: [{prop: 'name', label: '姓名'}] 
  }"
  :options="deptTree"
  :table-options="userList"
/>

<!-- 3. 模拟接口请求 (Simulated API) -->
<template>
  <DynaForm
    v-model="ids"
    :config="{
        type: 'PERSONPKR',
        pageSize: 10,
        columns: [{prop: 'name', label: '姓名'}, {prop: 'email', label: '邮箱'}]
    }"
    :options="deptTree"
    :table-options="tableData"
    :total="total"
    @page-change="fetchData"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      ids: [],
      tableData: [],
      total: 0,
      deptTree: [...] 
    };
  },
  methods: {
    fetchData({ page, pageSize, deptId, search }) {
      // 模拟请求
      setTimeout(() => {
         // Generate mock data based on page/pageSize
         const mockData = Array.from({ length: pageSize }, (_, i) => ({
             id: (page - 1) * pageSize + i,
             name: 'User ' + ((page - 1) * pageSize + i),
             email: 'test@example.com'
         }));
         this.tableData = mockData;
         this.total = 100;
      }, 500);
    }
  }
}

属性列表 (config)

属性名	类型	说明
multiple	Boolean	是否多选
pageSize	Number	每页显示数量
columns	Array	(必填) 表格列配置
childrenField	String	树子结构字段
labelField	String	树显示字段