Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit431efab

Browse files
committed
Updated README.md
1 parent8ea18ac commit431efab

File tree

1 file changed

+35
-23
lines changed

1 file changed

+35
-23
lines changed

‎README.md

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,22 @@
1919
---
2020

2121
###Demo
22-
!['Screenshot'](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/screenshot.png)
22+
<palign="center">
23+
<img src="screenshot.png">
24+
</p>
2325

2426
###Install/Usage
27+
For use this package is necessary install[babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) dependency.
28+
2529
```
2630
$ npm install vue-datasource
2731
```
2832

2933
```html
3034
<divid="#app">
3135
<server-datasource
32-
source="api_url"
36+
:source="items"
37+
:total="total_of_items"
3338
:columns="columns"
3439
:actions="actions"></server-datasource>
3540
</div>
@@ -45,6 +50,8 @@ new Vue({
4550
},
4651
data() {
4752
return {
53+
items: [...],
54+
total:100,
4855
columns: [...],
4956
actions: [...]
5057
}
@@ -55,34 +62,21 @@ new Vue({
5562
##Documentation
5663

5764
###Available Props
58-
| Prop| Type| Default| Description|
59-
|-------------|---------|----------------|-------------------------------------------------------------|
60-
| source| String|| API Url to get data|
65+
| Prop| Type| Default| Description|
66+
|-------------|---------|----------------|------------------------------------------------------------------------------------|
67+
| source| Array|| Items to show in table|
68+
| total | Number | | Total of items
6169
| translation| Object|[Object]| Defines the table labels language ([structure](#translation-structure))|
62-
| limits| Array|[1,5,10,15,20]| Defines the limits to display|
63-
| columns| Array|| Columns to display|
64-
| actions| Array|| Action buttons ([structure](#action-event-sctructure))|
70+
| limits| Array|[1,5,10,15,20]| Defines the limits to display|
71+
| columns| Array|| Columns to display|
72+
| actions| Array|| Action buttons ([structure](#action-event-sctructure))|
6573

6674
###Available Events
6775
| Event| Description|
6876
|-------------|-----------------------------------------------------------------------------------------------------|
6977
| change| Handle show limit changed. Gets object with new show limit and current page`{perpage: 10, page: 2}`|
7078
| searching| Handles search input. Gets string as parameter|
7179

72-
###Data API Example
73-
```javascript
74-
{
75-
"pagination": {
76-
"total":0,
77-
"to":0,
78-
"from":0,
79-
"per_page":10,
80-
"current_page":1
81-
},
82-
"data": [...items]
83-
}
84-
```
85-
8680
###Columns
8781
Each column object needs`name` and`key` attributes.
8882
```javascript
@@ -113,7 +107,7 @@ Laravel users can access relationships through the `key` attribute. Lets say we
113107
]
114108
```
115109

116-
To get the user's role we would need to define in our columns array:
110+
To get the user role we would need to define in our columns array:
117111
```javascript
118112
{
119113
...,
@@ -129,6 +123,7 @@ To get the user's role we would need to define in our columns array:
129123

130124
###Render column
131125
This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.
126+
132127
```javascript
133128
{
134129
...,
@@ -144,6 +139,23 @@ This callback will modify the data for various operations. Such as applying a sp
144139
}
145140
```
146141

142+
**[New]** Now you can use JSX for render other templates and too use the row data.
143+
144+
```javascript
145+
{
146+
...,
147+
columns: [
148+
{
149+
name:'Name',
150+
key:'key',
151+
render (value,row) {
152+
return<strong>{value}</strong>
153+
}
154+
}
155+
]
156+
}
157+
```
158+
147159
###Translation Structure
148160
```javascript
149161
{

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp