# JSelectMultiUser 用戶多選組件 [TOC=2,9] ## 參數配置 | 參數 | 類型 | 必填 |說明| |--------------|---------|----|---------| | value |Number | | 選中默認值 | | valueKey|String| | 自定義用于存儲的字段 默認`username`| | displayKey|String| | 自定義用于展示的字段 默認`realname `| | multi |Boolean | | 是否多選 默認false | | disabled |Boolean | | 是否禁用 默認false| | queryConfig | Array | | 自定義查詢條件 | ### queryConfig參數配置 >[info] 注：不止`JSelectMultiUser`可以使用`queryConfig`屬性來自定義查詢條件，任何基于`JSelectBizComponent`的組件都可以使用該屬性，配置方式不變。 | 參數 | 類型 | 必填 |說明| |--------------|---------|----|---------| | key | string | ?? | 唯一key，查詢條件傳給后臺的字段名 | | label | string | | 組件左側標簽 | | dictCode | string | | 如果包含 dictCode，那么就會顯示成下拉框 | | placeholder | string | | 占位符，默認值：請輸入[label] \| 請選擇[label] | | customRender| function({key, queryParam, options}) | | 自定義組件渲染，如果想要使用`局部注冊`的組件，就必須要使用箭頭函數。 | ## 使用示例  -------- ```html <template> <a-form :form="form"> <a-form-item label="用戶選擇v-decorator" style="width: 500px"> <j-select-multi-user v-decorator="['users']"/> {{ getFormFieldValue('users') }} </a-form-item> <a-form-item label="用戶選擇v-model" style="width: 500px"> <j-select-multi-user v-model="users" ></j-select-multi-user> {{ users }} </a-form-item> </a-form > </template> <script> import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser' export default { components: {JSelectMultiUser}, data() { return { form: this.$form.createForm(this), users:"", } }, methods:{ getFormFieldValue(field){ return this.form.getFieldValue(field) } } } </script> ``` ### 自定義查詢條件示例    > customRender 示例 ```js { key: 'birthday', label: '生日', placeholder: '請選擇出生日期', // 如果想要使用局部注冊的組件，就必須要使用箭頭函數 customRender: ({key, queryParam, options}) => { return <j-date {...options} vModel={queryParam[key]} style="width:180px;"/> }, } ```   --------- ### 自定義存儲、展示字段 ```html <template> <a-form :form="form"> <a-form-item label="用戶選擇v-decorator" style="width: 500px"> <j-select-multi-user valueKey="realname" displayKey="username" v-decorator="['users']"/> {{ getFormFieldValue('users') }} </a-form-item> <a-form-item label="用戶選擇v-model" style="width: 500px"> <j-select-multi-user valueKey="realname" displayKey="username" v-model="users" /> {{ users }} </a-form-item> </a-form > </template> <script> import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser' export default { components: {JSelectMultiUser}, data() { return { form: this.$form.createForm(this), users:"", } }, methods:{ getFormFieldValue(field){ return this.form.getFieldValue(field) } } } </script> ```