mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Transfer: support scoped slot for data items (#10577)

Browse Source
This commit is contained in:
杨奕
2018-04-05 21:25:14 +08:00
committed by GitHub
parent 39caa1395b
commit 02440aa5fb
14 changed files with 216 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
examples/docs/en-US/input.md
View File

@@ -509,9 +509,9 @@ Customize how suggestions are displayed.
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="props">
<div class="value">{{ props.item.value }}</div>
<span class="link">{{ props.item.link }}</span>
<template slot-scope="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
</el-autocomplete>
@@ -712,7 +712,7 @@ Attribute | Description | Type | Options | Default
| prefix-icon | prefix icon class | string | — | — |
| suffix-icon | suffix icon class | string | — | — |
### Autocomplete slots
### Autocomplete Slots
| Name | Description |
|------|--------|
@@ -721,6 +721,11 @@ Attribute | Description | Type | Options | Default
| prepend | content to prepend before Input |
| append | content to append after Input |
### Autocomplete Scoped Slot
| Name | Description |
|------|--------|
| — | Custom content for input suggestions. The scope parameter is { item } |
### Autocomplete Events
| Event Name | Description | Parameters |

5
examples/docs/en-US/table.md
View File

@@ -2043,3 +2043,8 @@ You can customize row index in `type=index` columns.
| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
### Table-column Scoped Slot
| Name | Description |
|------|--------|
| — | Custom content for table columns. The scope parameter is { row, column, $index } |

74
examples/docs/en-US/transfer.md
View File

@@ -52,7 +52,8 @@
value1: [1, 4],
value2: [],
value3: [1],
value4: [],
value4: [1],
value5: [],
filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
},
@@ -155,26 +156,51 @@ You can search and filter data items.
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. Plus, you can also use scoped slot to customize data items. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
```html
<template>
<el-transfer
v-model="value3"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
</el-transfer>
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value3"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
</el-transfer>
<p style="text-align: center; margin: 50px 0 20px">Customize data items using scoped slot</p>
<div style="text-align: center">
<el-transfer
style="text-align: left; display: inline-block"
v-model="value4"
filterable
:left-default-checked="[2, 3]"
:right-default-checked="[1]"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}"
@change="handleChange"
:data="data">
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
<el-button class="transfer-footer" slot="left-footer" size="small">Operation</el-button>
<el-button class="transfer-footer" slot="right-footer" size="small">Operation</el-button>
</el-transfer>
</div>
</div>
</template>
<style>
@@ -201,6 +227,7 @@ You can customize list titles, button texts, render function for data items, che
return {
data: generateData(),
value3: [1],
value4: [1],
renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>;
}
@@ -224,7 +251,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
```html
<template>
<el-transfer
v-model="value4"
v-model="value5"
:props="{
key: 'value',
label: 'desc'
@@ -249,7 +276,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
};
return {
data3: generateData3(),
value4: []
value5: []
};
}
};
@@ -279,6 +306,11 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
| left-footer | content of left list footer |
| right-footer | content of right list footer |
### Scoped Slot
| Name | Description |
|------|--------|
| — | Custom content for data items. The scope parameter is { option } |
### Methods
| Method | Description | Parameters |
| ---- | ---- | ---- |

4
examples/docs/en-US/tree.md
View File

@@ -1228,7 +1228,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
| node-drag-end | triggers when dragging ends | four parameters: node object corresponding to the dragging node, node object corresponding to the dragging end node (may be `undefined`), node drop type (before / after / inner), event. |
| node-drop | triggers after the dragging node is dropped | four parameters: node object corresponding to the dragging node, node object corresponding to the dropped node, node drop type (before / after / inner), event. |
### Scoped slot
| name | Description |
### Scoped Slot
| Name | Description |
|------|--------|
| — | Custom content for tree nodes. The scope parameter is { node, data } |