列表选择器

使用场景

快速实现列表选择模块功能。 通常用于关联数据的相互绑定。

安装命令

npm run widgets list-picker

执行命令后，工具生成在项目的 ".my/widgets/list-picker" 路径下；

生成文件目录如下：

• core.vue （选择器组件）
• index.vue （选择器+表单+弹窗组件）

基础用法

常规使用组件

自定义选项内容与查询条件

表格模式

结合表单

直接使用内部

使用选择器内部

属性参数

组件基于my-select-field组件和my-list组件封装，

表单弹窗参数

参数	说明	类型	可选值	默认值
value	用作v-model双向绑定	array	—	[]
fieldProps	my-select-field组件的参数	object	-	-
optionsPropsMap	选项表单与选项列表的共同字段映射	object	-	{ label: 'name', id: 'id', value: 'id' }
keepPickerState	打开选择器时是否回填当前选择数据	boolean	-	true

表单弹窗参数

参数	说明	类型	可选值	默认值
listLoad		Function
optionsPropsMap	选项的字段映射	Object	-	{ label: 'name', id: 'id', value: 'id' }
selItemShowMax	选中最多显示的数量	Number	-	5
isShowResult	是否显示选中结果	Boolean	-	true
isShowSubmit	是否显示提交按钮	Boolean	-	true
isMultiSel	是否多选	Boolean	-	true

其他参数

支持 my-table 除 loader 外其他参数

API method

Picker (整体组件)方法

参数	说明	参数	输出
openPicker	打开弹窗（dialog）的函数	-	-
closePicker	关闭弹窗（dialog）的函数	-	-
filterSubmitHandle	查询表单的提交函数	query 表单查询数据	-

PickerCore (选择器组件) 方法

参数	说明	参数	输出
removeItemSel	删除选中的选项	item选项数据	-
getSelectItems	获取选中的选项	-	选中数据数组
setSelectItems	设置选中的选项	items 选项数据数组	-
clearSelectItems	清空选中的选项	-	-