# ref-multiple-table

> 单选多选表格参照

Latest version **2.1.12** (published 2023-11-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ref-multiple-table
pnpm add ref-multiple-table
yarn add ref-multiple-table
bun add ref-multiple-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.12 |
| Published | 2023-11-28 |
| First published | 2018-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 3.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wangxgk@yonyou.com |
| Maintainers | duxue, jwangyangls, shaohlr, honely1314, xiaoshutong, yonyoufed, jonyw, guoyongfeng, kvkens, whizbz, npm_yx, bjyxszd, tinper-bot, houjitong, gaox2025f, gcht163, cnkvkens, diozhu, wangjings123, wxgg |

## Links

- npm: https://www.npmjs.com/package/ref-multiple-table
- Repository: https://github.com/tinper-acs/ref-multiple-table
- Homepage: https://github.com/tinper-acs/ref-multiple-table#readme
- Issues: https://github.com/tinper-acs/ref-multiple-table/issues
- npm.io page: https://npm.io/package/ref-multiple-table

## Dependencies (10)

- [bee-form](https://npm.io/package/bee-form.md) ^2.0.11
- [ref-core](https://npm.io/package/ref-core.md) ^1.0.20
- [bee-label](https://npm.io/package/bee-label.md) ^1.0.0
- [bee-modal](https://npm.io/package/bee-modal.md) ^2.0.4
- [bee-radio](https://npm.io/package/bee-radio.md) ^2.0.8
- [bee-table](https://npm.io/package/bee-table.md) 2.3.14-beta.2
- [bee-loading](https://npm.io/package/bee-loading.md) ^1.0.9
- [bee-checkbox](https://npm.io/package/bee-checkbox.md) ^2.0.5
- [bee-pagination](https://npm.io/package/bee-pagination.md) ^2.0.6
- [bee-search-panel](https://npm.io/package/bee-search-panel.md) ^2.0.14

## Recent versions

- 2.1.12 (latest) — 2023-11-28
- 2.0.4-beta.0 (beta) — 2019-05-24
- 0.1.13 (walsin) — 2018-12-19
- 2.2.0 — 2024-05-17
- 2.1.12-beta.0 — 2024-05-14
- 3.1.7 — 2023-11-28
- 2.1.11 — 2023-11-22
- 3.1.6 — 2023-11-22
- 2.1.10 — 2023-08-23
- 2.1.9 — 2023-08-23
- 3.1.5 — 2023-08-23
- 3.1.4 — 2023-08-23
- 2.1.8 — 2023-01-11
- 3.1.3 — 2023-01-11
- 3.1.2 — 2023-01-11
- … 86 more at https://npm.io/package/ref-multiple-table/versions

## README

# 表格参照RefMultipleTable 


## 何时使用

单选多选表格参照


## 如何使用

``` sh
$ ynpm install ref-multiple-table --save

引入

import RefMultipleTableBaseUI,{ SearchPanelItem }  from 'ref-multiple-table'

或者

import { RefMultipleTableWithInput } from 'ref-multiple-table'

样式

import 'ref-multiple-table/lib/index.css';

```


## 代码演示


## 分类


RefMultipleTableBaseUI（默认）

      表格参照的纯ui，需要正确的参数传入。


RefMultipleTableWithInput

    带文本框的参照弹出窗。

SearchPanelItem

    表格参照搜索面板处的搜索条件。（带有复杂搜索的表格参照需要使用此组件）


## API

### RefMultipleTableBaseUI

以下参数为 `<RefMultipleTableBaseUI/>`需要使用的，为了保证功能的正常使用请传入。

参数 | 类型 |默认值| 说明 | 必选
---|---|--- | --- | ---
className |`string`|-- | 参照class样式，作用于弹出层的样式，默认为空。 | 否
title |``string``|'' |打开上传的模态框显示的标题文字 | 否
backdrop |`bool`| true |弹出层是否有模态层，true 显示，false 不显示 | 否
lang|`string`| `zh_CN` |多语配置。取值范围[en_US,zh_TW,fr_FR,de_DE,ja_JP,zh_CN] | 否
buttons|`object`| - |{buttons:{cancelText:'取消',clearText:'清空已选',okText:'确认'}} 按钮文字展示| 否
emptyBut| `bool` | false| 清空按钮是否展示 |否
miniSearch| `bool`|true|默认是简单搜索。miniSearch=true则只展示简单搜索|否
size|`String`|'lg'|modal的size|否
valueField |``string``|'refpk' |待提交的value的键。或者说指定真实数据的键。要求具有唯一性| 否
searchFilterInfo | `function(value)`| - | 复杂搜索的查询回调，将搜索条件带回。| 否
miniSearchFunc| `function(value)`|- |  简单搜索的实时查询回调，将搜索条件带回| 否
onSearchClick| `function(value)`|- | 简单搜索的点击搜索按钮查询回调，将搜索条件带回| 否
showLoading | `bool` | -- | 是否展示loading| 否
<span style="color:red;">*</span>fliterFormInputs| `Array`| -- | 查询条件的dom，配合SearchPanelItem一起使用。| 否
<span style="color:red;">*</span>tableData | `Array` | — | 表体数据 | 否
<span style="color:red;">*</span>columsData | `Array`| — | 表头数据 | 否
pageCount |`number`| 1 |分页组件总页数 | 否
currPageIndex| `number`| 1 |当前页数 | 否
totalElements | `number`| — |一共多少条 | 否
dataNumSelect | `function(index,pagesize)`| — |选择每页多少条的回调函数 | 否
handlePagination| `function(currenIndex)`| — |切换页的方法 | 否
showModal | `bool` | false | 是否展示参照 ，true显示，false不显示| 否
onSave | `function(value)` | -- | 参照确定的回调| 否
onCancel | `function()` | -- | 参照取消的回调| 否
matchData | `Array` | [] | 选中的节点，选中节点只从matchData中获取。matchData是全部选中的数据| 否
theme| `String` | 'ref-red' | 启用参照内部默认样式。theme=''，不使用参照默认样式。| 否
searchPanelLocale | `Object` | {'title': '条件筛选','resetName': '重置','searchName': '查询','down':'打开','up':'关闭',} | 复杂搜索标题，按钮的文字等信息。与组件bee-search-panel保持一致 | 否
mustPaginationShow | `bool` | false | true必须展示分页、false，当pageCount>1才展示分页| 否
tableProps | `object`| {} | table上其他属性，具体接收的参数参照bee-table| 否
modalProps | `object`| {} | modal上其他属性，具体接收的参数参照bee-modal| 否
paginationProps | `object`| {} | 具体接收的参数参照bee-pagination| 否
searchPlaceholder| `String` | '搜索' | 打开弹框上简单搜索的placeholder | 否


### RefMultipleTableWithInput
RefMultipleTableWithInput可以使用RefMultipleTableBaseUI的参数（除了showModal），还可以使用以下参数。

参数 | 类型 |默认值| 说明 | 必选
---|---|--- | --- | ---
wrapClassName|`string`|空 | 文本框的class样，默认为空。 | 否
placeholder|`string`| 空 |文本框的 placeholder | 否
style| `object`| {width:200}| 文本框的style，默认宽度200px | 否 
filterUrl| `string`|空|快捷录入接口。|否
filterUrlFunc| `function(value)` | ()=>{} | 必须配合filterUrl使用，当filterUrl为空或者不传入，才会回调filterUrlFunc | 否
filterData| `Array`| [] | 必须配合filterUrlFunc使用，filterData是过滤列表全部数据| 否
displayField |<code>string 或 function</code>|'{refname}' |~~input中显示的内容的格式和~~过滤列表显示的内容格式。<br/>当为字符串时则会根据`{}`包裹的增则匹配替换。<br/>如：`{refname}`<br/>当为函数时则需自定义返回内容，参数为迭代已的记录。<br/>如：<br/>displayField: (record)=>  ${record.refname}-${record.refname}，是input展示value| 否
inputDisplay | <code>string 或 function</code>|'{refname}' |input中显示的内容的格式。<br/>当为字符串时则会根据`{}`包裹的增则匹配替换。<br/>如：`{refname}`<br/>当为函数时则需自定义返回内容，参数为迭代已的记录。<br/>如：<br/>displayField: (record)=>  ${record.refname}-${record.refname}，是input展示value| 否
value| `string|array[object]`| 空 |带有input框参照的input默认值，展示形式配合displayField。格式符合`'{"refname":"初级-T1","refpk":"level1"}'`。refname和refpk必须有，refpk表示该条数据的键，应取valueFiled指定值。或者数组格式(适合多选)，[object1,object2...]|否
disabled|`bool`| false |禁用整个input框 | 否
onChange|`function(values, record)`|--| value改变、选中过滤数据和保存时数据回调。values是obj，格式{'refname':'','refpk':''},record是该条完整数据|否
canClickGoOn|`function()`| ()=>{return true}|当点击文本框右侧弹出按钮时是否打开modal<br>适用于级联情况下当选择不全时的处理| 否 
canInputGoOn|`function()`| ()=>{return true}|当点击文本框触发快捷录入时是否可以录入<br>适用于级联情况下当选择不全时的处理| 否 
menuIcon| `dom` | <span><i className="uf uf-navmenu"></i></span> | input框参照打开按钮，默认汉堡按钮 | 否
footerBtnDom | `dom` | <span></span> | 自定义footer的按钮dom | 否

## API 解读

### 一、input框的展示值

1. input框的初始值，只从value的refname中获取
1. 参照进行保存操作之后（点击参照确认按钮），input框展示由inputDisplay来决定

### 二、value、inputDisplay、 displayField

1. value和inputDisplay是针对input框来说。

2. value格式可以是`'{"refname":"初级-T1","refpk":"level1"}'`或者数组[object1,object2...]。refname字段不可变，refpk是该数据键，要求具有唯一性；object中应包含数据项具体信息。

3. inputDisplay确定input中显示内容的格式，displayField过滤列表显示内容的格式。inputDisplay和displayField中使用到的字段必须是filterData,matchData和treeData数据项中都含有的字段。

[inputDisplay 和 displayField 具体使用参考Demo3](http://bee.tinper.org/tinper-acs/ref-multiple-table#%E5%9F%BA%E7%A1%80%E7%A4%BA%E4%BE%8B3)

> 注意：value格式是`'{"refname":"初级-T1","refpk":"level1"}'`，inputDisplay只包含refname或者refpk

### 三、value、valueFiled
  
1. value初始化input框值，是input需要使用的数据，要求如上。
2. valueFiled指定数据源的键，要求具有唯一性。
因此value中refpk指定值应与valueFiled取值一致。

[value 和 valueFiled 具体使用参考demo3](http://bee.tinper.org/tinper-acs/ref-multiple-table#%E5%9F%BA%E7%A1%80%E7%A4%BA%E4%BE%8B3)

> 注意，在多选情况下，value是字符串`'{"refname":"初级-T1","refpk":"level1"}'`格式，那么valueFiled只能指定是`refpk`；value是数组，valueField可以是其他字段

### 四、value、matchData

value初始化input框值，matchData是指定参照中选中的节点。value与matchData并不完全相同。

1. 如果value有值matchData为空，那么input有值但是参照无选中数据；
2. 反之value空值matchData有值，那么input为空但是参照有选中数据；
3. 如果value与matchData都有值，但是不匹配，树中选中数据按照matchData。

[value 和 matchData 具体使用参考demo3](http://bee.tinper.org/tinper-acs/ref-multiple-table#%E5%9F%BA%E7%A1%80%E7%A4%BA%E4%BE%8B3)

### 五、filterUrl、filterUrlFunc、filterData

实现参照输入框的快捷录入功能。

1. filterUrl 实现快捷搜索：
input 中输入的内容，会作为过滤参数请求 filterUrl 接口，取回数据自动更新下拉面板的过滤结果

2. filterUrlFunc+filterData 实现快捷搜索：
在没有 filterUrl 的情况下，input 中输入的过程中，会调用 filterUrlFunc 回调，参数是 input 中输入的内容。用户可以在 filterUrlFunc 方法中自定义请求，并将处理后的过滤结果（filterData）存储起来。然后更新传给参照的 filterData 属性，这样同样会更新下拉过滤面板内容

## 注意事项

## 更新日志

---
_Source: https://npm.io/package/ref-multiple-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._