From 606decc3f5749559a035bd22ec95cde18bbd117c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= Date: Tue, 30 Jan 2024 20:34:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E8=AF=B4?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui-components/mdp-select-table-select.png | Bin 0 -> 12677 bytes .../mdp-ui/mdp-select-table/README.md | 207 +++++------------- src/components/mdp-ui/mdp-table/README.md | 29 +-- 3 files changed, 70 insertions(+), 166 deletions(-) create mode 100644 docs/images/ui-components/mdp-select-table-select.png diff --git a/docs/images/ui-components/mdp-select-table-select.png b/docs/images/ui-components/mdp-select-table-select.png new file mode 100644 index 0000000000000000000000000000000000000000..b38f84b30015b08d84b3b9c66e07310e4843f301 GIT binary patch literal 12677 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 literal 0 HcmV?d00001 diff --git a/src/components/mdp-ui/mdp-select-table/README.md b/src/components/mdp-ui/mdp-select-table/README.md index b47b8af..7dcb9b5 100644 --- a/src/components/mdp-ui/mdp-select-table/README.md +++ b/src/components/mdp-ui/mdp-select-table/README.md @@ -1,158 +1,61 @@ -### mdp-select 效果图 -- origin风格 -![mdp-select](/docs/images/ui-components/select-origin.jpg) -- tag风格 -![mdp-select-tag](/docs/images/ui-components/select-tag.jpg) -- x风格 -1. 鼠标未进入 -![mdp-select-x-no-hove](/docs/images/ui-components/select-x-no-hove.jpg) -2. 鼠标进入后 -![mdp-select-x-hove](/docs/images/ui-components/select-x-hove.jpg) -### 用法 -#### 字典列表 +### mdp-select-table 效果图 +- 该组件与mdp-select效果一致,同样支持origin/tag/x三种风格,不同之处在于具有分页功能,适合超大表格数据的选择,如下图1所示,默认只会展示用过的数据,如果需要更多数据,需要点击【更多数据】按钮,将会弹出图2所示,当用户选中数据后,数据将填充到图1的下拉列表中,并且能够模拟select的选中事件 +![mdp-select-table-select](/docs/images/ui-components/mdp-select-table-select.png) -- 基本用法 -从数据库表meta_meta_option加载 item_code='userStatus'的列表数据 -```html - -``` -- 不同展示风格 -1. 按select的原始方式展示,用于查询条件、一般表单输入等场景 -```html - -``` -2. 鼠标未进入时,展示为tag,鼠标进入后,展示为下拉列表可选状态,用于可编辑表格 -```html - -``` -3. 相对于tag风格,x风格更综合,展示包括label、title、头像等 -```html - -``` -- 带过滤条件用法 -可通过 params传递后台接受的任意参数 -```html - -``` -#### 自定义列表 - -```html - -``` - -#### 在原有列表添加额外的列表 - -```html - -``` +![mdp-select-table](/docs/images/ui-components/mdp-select-table.png) +### 用法 -#### 过滤掉部分不需要的列表选项 -```js - filterFun(option,options){ - if(option.id=='x' || option.relyType=='1'){ - return false;//过滤 - }else{ - return true - } - } -``` -```html - -``` -#### 通过监听change2获取选中的对象 -```js - onUserStatusCange(option){ - this.username=option.name - this.userType=option.relyType - } -``` -```html - +#### 通过属性columnCfgs传入表格字段列表,mdp框架将解析出表头内容,用于配置显示列,排序,高级查询等 +```html + + +``` +```js + +``` + +#### 多选、单选模式 +```html + + +``` +```js + ``` -#### 从其它api获取数据 -通过$mdp.listBranch查询后台数据,params将作为查询参数发给后台,props告诉组件id,name分别取后台返回的对象的哪个属性 -```html - -``` ### Attributes -|参数|说明|类型|可选值|默认值| -|--------|------|--------|-----------------|----------------| -|show-type|组件分类|string|select / checkbox / radio| select -|show-style|展示风格|string|origin / tag / x| origin -|props|对象属性对照|object| |{id:'id',name:'name'} -|loadFun|从后台加载数据的api|function,返回Promise| | -|split|多选的时候,如果要返回字符串时的分隔符,如果设置了值,v-mode传入传出的值将是被该分隔符分割的字符串,如v-model="1,2,3,4"|string| , | -|filterFun|从后台返回的数据进行过滤后再装载到下拉列表,filterFun(option,options),返回true\false,false则过滤掉|function| | -|options|直接指定列表数据|Array -|plusOptions|在原有列表上添加额外的列表项 -|⚠️注意:|以上为mdp-ui对element-ui的改造,后面的属于element-ui的原有属性 -|value / v-model|绑定值|boolean / string / number|—|— -|multiple|是否多选|boolean|—|false -|disabled|是否禁用|boolean|—|false -|value-key|作为 value 唯一标识的键名,绑定值为对象类型时必填|string|—|value -|size|输入框尺寸|string|medium/small/mini|— -|clearable|是否可以清空选项|boolean|—|false -|collapse-tags|多选时是否将选中值按文字的形式展示|boolean|—|false -|multiple-limit|多选时用户最多可以选择的项目数,为 0 则不限制|number|—|0 -|name|select input 的 name 属性|string|—|— -|autocomplete|select input 的 autocomplete 属性|string|—|off -|~~auto-complete~~|下个主版本弃用|string|—|off -|placeholder|占位符|string|—|请选择 -|filterable|是否可搜索|boolean|—|false -|~~allow-create~~|是否允许用户创建新条目,需配合 filterable 使用|boolean|—|false -|filter-method|自定义搜索方法|function|—|— -|~~remote~~|是否为远程搜索|boolean|—|false -|~~remote-method~~|远程搜索方法|function|—|— -|~~loading~~|是否正在从远程获取数据|boolean|—|false -|~~loading-text~~|远程加载时显示的文字|string|—|加载中 -|no-match-text|搜索条件无匹配时显示的文字,也可以使用slot="empty"设置|string|—|无匹配数据 -|no-data-text|选项为空时显示的文字,也可以使用slot="empty"设置|string|—|无数据 -|popper-class|Select 下拉框的类名|string|—|— -|reserve-keyword|多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词|boolean|—|false -|~~default-first-option~~|在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用|boolean|-|false -|~~popper-append-to-body~~|是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false|boolean|-|true -|~~automatic-dropdown~~|对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单|boolean|-|false - - -### Events -|事件名称|说明|回调参数| -|--------|------|--------| -change2|选中值发生变化时触发,在需要获取值以外更多信息时使用|目前的选中的整个对象,如果multiple=false,返回一个对象,否则返回对象数组 -change|选中值发生变化时触发|目前的选中值,如果multiple=false,返回一个值,否则返回值数组,如果split有则,则返回以split分割的字符串,如1,2,3,4,5 -visible-change|下拉框出现/隐藏时触发|出现则为 true,隐藏则为 false -remove-tag|多选模式下移除tag时触发|移除的tag值 -clear|可清空的单选模式下用户点击清空按钮时触发|— -blur|当 input 失去焦点时触发|(event: Event) -focus|当 input 获得焦点时触发|(event: Event) - -### slot -|name|说明| -|--------|------| -—|Option 组件列表 -info|鼠标未进入时展示的内容,showStyle=tag\x时有效 -oper|鼠标进入后展示的内容,showStyle=tag\x时有效 -~~prefix|Select 组件头部内容~~ -empty|无选项时的列表 - -### ~~Option Group Attributes~~ - -|参数|说明|类型|可选值|默认值| -|--------|------|--------|-----------------|----------------| -label|分组的组名|string|—|— -disabled|是否将该分组下所有选项置为禁用|boolean|—|false - -### ~~Option Attributes~~ - -|参数|说明|类型|可选值|默认值| -|--------|------|--------|-----------------|----------------| -value|选项的值|string/number/object|—|— -label|选项的标签,若不设置则默认与 value 相同|string/number|—|— -disabled|是否禁用该选项|boolean|—|false -### Methods - -|方法名|说明|参数| -|--------|------|--------| -focus|使 input 获取焦点|- -blur|使 input 失去焦点,并隐藏下拉框|- \ No newline at end of file +相关配置与mdp-table一摸一样,具体查看 +[mdp-table](/src/components/mdp-ui/mdp-table) \ No newline at end of file diff --git a/src/components/mdp-ui/mdp-table/README.md b/src/components/mdp-ui/mdp-table/README.md index a745762..3b47e8d 100644 --- a/src/components/mdp-ui/mdp-table/README.md +++ b/src/components/mdp-ui/mdp-table/README.md @@ -51,9 +51,9 @@ #### 通过属性columnCfgs传入表格字段列表,mdp框架将解析出表头内容,用于配置显示列,排序,高级查询等 -```html +```html - + ``` ```js