From 22c5825196474c2b7807cabb7bc4f9748b0df91d Mon Sep 17 00:00:00 2001 From: aisin Date: Sun, 7 Jun 2020 16:57:36 +0800 Subject: [PATCH 1/2] Extend the type of dataKey to support function --- src/index.js | 9 ++++++--- src/props.js | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index a7768a1..58b2a10 100644 --- a/src/index.js +++ b/src/index.js @@ -205,7 +205,9 @@ const VirtualList = Vue.component('virtual-list', { }, getUniqueIdFromDataSources () { - return this.dataSources.map((dataSource) => dataSource[this.dataKey]) + return this.dataSources.map((dataSource) => { + return typeof this.dataKey === 'function' ? this.dataKey(dataSource) : dataSource[this.dataKey] + }) }, // event called when each item mounted or size changed @@ -267,7 +269,8 @@ const VirtualList = Vue.component('virtual-list', { for (let index = start; index <= end; index++) { const dataSource = dataSources[index] if (dataSource) { - if (Object.prototype.hasOwnProperty.call(dataSource, dataKey)) { + const uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey] + if (uniqueKey) { slots.push(h(Item, { // key: dataSource[dataKey], props: { @@ -275,7 +278,7 @@ const VirtualList = Vue.component('virtual-list', { tag: itemTag, event: EVENT_TYPE.ITEM, horizontal: isHorizontal, - uniqueKey: dataSource[dataKey], + uniqueKey: uniqueKey, source: dataSource, extraProps: extraProps, component: dataComponent, diff --git a/src/props.js b/src/props.js index 4953f00..95b6879 100644 --- a/src/props.js +++ b/src/props.js @@ -4,7 +4,7 @@ export const VirtualProps = { dataKey: { - type: String, + type: [String, Function], required: true }, dataSources: { From a7fadc172f6de86fdc3ba00ec9dbbbf947d70f41 Mon Sep 17 00:00:00 2001 From: aisin Date: Sun, 7 Jun 2020 16:59:04 +0800 Subject: [PATCH 2/2] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fe9bf80..5d62863 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ More usages or getting start you can refer to these clearly [examples](https://g | **             Prop             ** | **Type** | **Description** | |------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------| -| `data-key` | String | The unique key get from `data-sources` in each data object, its value **must be unique** in `data-sources`, it is used for identifying item size. | +| `data-key` | String\|Function | The unique key get from `data-sources` in each data object, or generated by the attributes in each data object of `data-sources`. Its value **must be unique** in `data-sources`, it is used for identifying item size. | | `data-sources` | Array[Object] | The source array built for list, each array data must be an object and has an unique key for `data-key` property. | | `data-component` | Component | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render prop and named: `source`. |