# 列表选择器

# 使用场景

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

# 安装命令

npm run widgets list-picker
1

执行命令后,工具生成在项目的 ".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 清空选中的选项 - -