mirror of https://github.com/ElemeFE/element
Transfer: support scoped slot for data items (#10577)
杨奕
GitHub
parent
39caa1395b
commit
02440aa5fb
|
|
@ -21,7 +21,7 @@
|
|||
<a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Graphite</p>
|
||||
<p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Diamond</p>
|
||||
<el-popover
|
||||
ref="weixin"
|
||||
placement="top"
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 } |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
| ---- | ---- | ---- |
|
||||
|
|
|
|||
|
|
@ -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 } |
|
||||
|
|
|
|||
|
|
@ -489,9 +489,9 @@ Personalice cómo se muestran las sugerencias.
|
|||
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>
|
||||
|
||||
|
|
@ -689,7 +689,7 @@ Atributo | Descripción | Tipo | Opciones | Por defecto
|
|||
| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
|
||||
### Autocomplete slots
|
||||
### Autocomplete Slots
|
||||
|
||||
| Nombre | Descripción |
|
||||
| ------- | ------------------------------------ |
|
||||
|
|
@ -698,6 +698,12 @@ Atributo | Descripción | Tipo | Opciones | Por defecto
|
|||
| prepend | contenido antes del input |
|
||||
| append | contenido a añadir después del input |
|
||||
|
||||
### Autocomplete Scoped Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Custom content for input suggestions. The scope parameter is { item } |
|
||||
|
||||
### Autocomplete Eventos
|
||||
|
||||
| Nombre | Descripción | Parametros |
|
||||
|
|
|
|||
|
|
@ -2045,3 +2045,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
|
|||
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
|
||||
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column) | — | — |
|
||||
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |
|
||||
|
||||
### Table-column Scoped Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Custom content for table columns. The scope parameter is { row, column, $index } |
|
||||
|
|
|
|||
|
|
@ -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 @@ Puede buscar y filtrar los items.
|
|||
|
||||
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
|
||||
|
||||
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
|
||||
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
|
||||
```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>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
@ -201,6 +227,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
|||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
|
|
@ -225,7 +252,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value4"
|
||||
v-model="value5"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
|
|
@ -250,7 +277,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value4: []
|
||||
value5: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -280,6 +307,11 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
| left-footer | Contenido del footer de la lista de la izquierda |
|
||||
| right-footer | Contenido del footer de la lista de la derecha |
|
||||
|
||||
### Scoped Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Custom content for data items. The scope parameter is { option } |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
|
|
|
|||
|
|
@ -1226,7 +1226,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
|
|||
| node-drag-end | se activa cuando se termina de arrastrar | cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
|
||||
| node-drop | después de soltar el nodo de arrastre | cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
|
||||
|
||||
### Scoped slot
|
||||
| name | Description |
|
||||
### Scoped Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |
|
||||
|
|
@ -579,9 +579,9 @@ export default {
|
|||
slot="suffix"
|
||||
@click="handleIconClick">
|
||||
</i>
|
||||
<template slot-scope="props">
|
||||
<div class="name">{{ props.item.value }}</div>
|
||||
<span class="addr">{{ props.item.address }}</span>
|
||||
<template slot-scope="{ item }">
|
||||
<div class="name">{{ item.value }}</div>
|
||||
<span class="addr">{{ item.address }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
|
|
@ -822,7 +822,7 @@ export default {
|
|||
| label | 输入框关联的label文字 | string | — | — |
|
||||
| tabindex | 输入框的tabindex | string | - | - |
|
||||
|
||||
### Input slots
|
||||
### Input Slots
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 输入框头部内容，只对 `type="text"` 有效 |
|
||||
|
|
@ -864,7 +864,7 @@ export default {
|
|||
| prefix-icon | 输入框头部图标 | string | — | — |
|
||||
| suffix-icon | 输入框尾部图标 | string | — | — |
|
||||
|
||||
### Autocomplete slots
|
||||
### Autocomplete Slots
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| prefix | 输入框头部内容 |
|
||||
|
|
@ -872,6 +872,11 @@ export default {
|
|||
| prepend | 输入框前置内容 |
|
||||
| append | 输入框后置内容 |
|
||||
|
||||
### Autocomplete Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义输入建议，参数为 { item } |
|
||||
|
||||
### Autocomplete Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------|--------|---------|
|
||||
|
|
|
|||
|
|
@ -2103,3 +2103,8 @@
|
|||
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
|
||||
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |
|
||||
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
|
||||
|
||||
### Table-column Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义列的内容，参数为 { row, column, $index } |
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
value1: [1, 4],
|
||||
value2: [],
|
||||
value3: [1],
|
||||
value4: [],
|
||||
value4: [1],
|
||||
value5: [],
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
},
|
||||
|
|
@ -152,26 +153,51 @@
|
|||
|
||||
可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。
|
||||
|
||||
:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
|
||||
:::demo 可以使用 `titles`、`button-texts`、`render-content` 和 `format` 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 `scoped-slot` 进行自定义。对于列表底部的内容区，提供了两个具名 slot：`left-footer` 和 `right-footer`。此外，如果希望某些数据项在初始化时就被勾选，可以使用 `left-default-checked` 和 `right-default-checked` 属性。最后，本例还展示了 `change` 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 `render-content` 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
|
||||
```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="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</el-transfer>
|
||||
<p style="text-align: center; margin: 0 0 20px">使用 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="['到左边', '到右边']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</el-transfer>
|
||||
</div>
|
||||
<p style="text-align: center; margin: 50px 0 20px">使用 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="['到左边', '到右边']"
|
||||
: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">操作</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
|
@ -198,6 +224,7 @@
|
|||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
}
|
||||
|
|
@ -221,7 +248,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value4"
|
||||
v-model="value5"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
|
|
@ -246,7 +273,7 @@
|
|||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value4: []
|
||||
value5: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -276,6 +303,11 @@
|
|||
| left-footer | 左侧列表底部的内容 |
|
||||
| right-footer | 右侧列表底部的内容 |
|
||||
|
||||
### Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义数据项的内容，参数为 { option } |
|
||||
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
|
|
|
|||
|
|
@ -1249,7 +1249,7 @@
|
|||
| node-drag-end | 拖拽结束时（可能未成功）触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event |
|
||||
| node-drop | 拖拽成功完成时触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event |
|
||||
|
||||
### Scoped slot
|
||||
### Scoped Slot
|
||||
| name | 说明 |
|
||||
|------|--------|
|
||||
| — | 自定义树节点的内容，参数为 { node, data } |
|
||||
|
|
|
|||
|
|
@ -82,10 +82,13 @@
|
|||
return vm;
|
||||
}
|
||||
};
|
||||
const parent = getParent(this);
|
||||
return parent.renderContent
|
||||
? parent.renderContent(h, this.option)
|
||||
: <span>{ this.option[parent.labelProp] || this.option[parent.keyProp] }</span>;
|
||||
const panel = getParent(this);
|
||||
const transfer = panel.$parent || panel;
|
||||
return panel.renderContent
|
||||
? panel.renderContent(h, this.option)
|
||||
: transfer.$scopedSlots.default
|
||||
? transfer.$scopedSlots.default({ option: this.option })
|
||||
: <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue