在项目中,我需要使用表单设计器form-create-designer设计带有选择用户的弹窗组件,而设计器内置的组件不能满足需求,因此要创建自定义组件。form-create 支持在表单内部生成任何 vue 组件。
1.开发选择用户的组件 SelectUser.vue
<!--用户选择组件-->
<template>
<div>
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="selectUserNames"/>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="selectUser">选择</el-button>
</el-col>
</el-row>
<el-input v-model="selectUserIds" style="display: none"/>
<el-dialog title="选择用户" v-model="dialogVisible" width="50%">
<el-row :gutter="10">
<el-col :span="8">
<el-tree-select v-model="value" :data="orgData" filterable :props="orgProps" show-checkbox/>
</el-col>
<el-col :span="8">
<el-input v-model="userName" placeholder="账号"/>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="search">查询</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="tableData" ref="tableRef" stripe style="width: 100%;height: 350px"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table-column prop="username" label="用户账号" width="140"/>
<el-table-column prop="realname" label="用户姓名" width="140"/>
<el-table-column prop="sex_dictText" label="性别" width="80"/>
<el-table