mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 04:37:47 +08:00
docs(transfer): fix error (#494)
This commit is contained in:
Ryan2128
GitHub
parent
69c6809b34
commit
ce2752cceb
@ -10,8 +10,8 @@ You can customize list titles, button texts, render function for data items, che
|
||||
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="leftValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -22,16 +22,21 @@ You can customize list titles, button texts, render function for data items, che
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
</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
|
||||
v-model="rightValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -41,21 +46,28 @@ You can customize list titles, button texts, render function for data items, che
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #default="{ option }">
|
||||
<span>{{ option.key }} - {{ option.label }}</span>
|
||||
</template>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -74,8 +86,8 @@ You can customize list titles, button texts, render function for data items, che
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
rightValue: [1],
|
||||
leftValue: [1],
|
||||
renderFunc(h, option) {
|
||||
return h("span", null, option.key, " - ", option.label);
|
||||
}
|
||||
|
||||
@ -42,12 +42,12 @@ Puede buscar y filtrar los items.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -89,8 +89,8 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
||||
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="leftValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -101,17 +101,22 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
</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
|
||||
v-model="rightValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -121,20 +126,27 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #default="{option}">
|
||||
<span>{{ option.key }} - {{ option.label }}</span>
|
||||
</template>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -153,8 +165,8 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
leftValue: [1],
|
||||
rightValue: [1],
|
||||
renderFunc(h, option) {
|
||||
return h("span", null, option.key, " - ", option.label);
|
||||
}
|
||||
@ -184,8 +196,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -44,12 +44,12 @@ Vous pouvez filtrer les options.
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -91,8 +91,8 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
|
||||
<p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="leftValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -103,16 +103,21 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
|
||||
>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Opération</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Opération</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
<p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="rightValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -122,21 +127,28 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@change="handleChange"
|
||||
:data="data">
|
||||
<span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
|
||||
<el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>
|
||||
>
|
||||
<template #default="{ option }">
|
||||
<span>{{ option.key }} - {{ option.label }}</span>
|
||||
</template>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">Opération</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">Opération</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -155,8 +167,8 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
leftValue: [1],
|
||||
rightValue: [1],
|
||||
renderFunc(h, option) {
|
||||
return h("span", null, option.key, " - ", option.label);
|
||||
}
|
||||
@ -186,8 +198,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
:::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
|
||||
```html
|
||||
<template>
|
||||
<el-transfer v-model="value" :data="data"></el-transfer>
|
||||
<el-transfer v-model="value" :data="data" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -39,12 +39,12 @@
|
||||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -86,8 +86,8 @@
|
||||
<p style="text-align: center; margin: 0 0 20px">使用 render-content 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="leftValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -98,17 +98,22 @@
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">操作</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">操作</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
<p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p>
|
||||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
v-model="rightValue"
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value4"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
@ -118,20 +123,27 @@
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
:data="data"
|
||||
@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>
|
||||
>
|
||||
<template #default="{option}">
|
||||
<span>{{ option.key }} - {{ option.label }}</span>
|
||||
</template>
|
||||
<template #left-footer>
|
||||
<el-button class="transfer-footer" size="small">操作</el-button>
|
||||
</template>
|
||||
<template #right-footer>
|
||||
<el-button class="transfer-footer" size="small">操作</el-button>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
.transfer-footer {
|
||||
margin-left: 20px;
|
||||
padding: 6px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -150,8 +162,8 @@
|
||||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
leftValue: [1],
|
||||
rightValue: [1],
|
||||
renderFunc(h, option) {
|
||||
return h("span", null, option.key, " - ", option.label);
|
||||
}
|
||||
@ -180,8 +192,8 @@
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
:data="data"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user