Skip to content

E
Element
Commit 15b5e316 authored by 刘鹏龙's avatar 刘鹏龙 Committed by hetech
Browse files
Options

Docs:rename variable in Tree,Transfer,Timeline,Tabs docs (#14602)

parent 7b24f825
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 174 deletions
examples/docs/en-US/tabs.md
View file @ 15b5e316
...@@ -210,14 +210,14 @@ Only card type Tabs support addable & closeable. ...@@ -210,14 +210,14 @@ Only card type Tabs support addable & closeable.
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<el-button <el-button
size="small" size="small"
@click="addTab(editableTabsValue2)" @click="addTab(editableTabsValue)"
> >
add tab add tab
</el-button> </el-button>
</div> </div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane <el-tab-pane
v-for="(item, index) in editableTabs2" v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
...@@ -229,8 +229,8 @@ Only card type Tabs support addable & closeable. ...@@ -229,8 +229,8 @@ Only card type Tabs support addable & closeable.
export default { export default {
data() { data() {
return { return {
editableTabsValue2: '2', editableTabsValue: '2',
editableTabs2: [{ editableTabs: [{
title: 'Tab 1', title: 'Tab 1',
name: '1', name: '1',
content: 'Tab 1 content' content: 'Tab 1 content'
...@@ -245,16 +245,16 @@ Only card type Tabs support addable & closeable. ...@@ -245,16 +245,16 @@ Only card type Tabs support addable & closeable.
methods: { methods: {
addTab(targetName) { addTab(targetName) {
let newTabName = ++this.tabIndex + ''; let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({ this.editableTabs.push({
title: 'New Tab', title: 'New Tab',
name: newTabName, name: newTabName,
content: 'New Tab content' content: 'New Tab content'
}); });
this.editableTabsValue2 = newTabName; this.editableTabsValue = newTabName;
}, },
removeTab(targetName) { removeTab(targetName) {
let tabs = this.editableTabs2; let tabs = this.editableTabs;
let activeName = this.editableTabsValue2; let activeName = this.editableTabsValue;
if (activeName === targetName) { if (activeName === targetName) {
tabs.forEach((tab, index) => { tabs.forEach((tab, index) => {
if (tab.name === targetName) { if (tab.name === targetName) {
...@@ -266,8 +266,8 @@ Only card type Tabs support addable & closeable. ...@@ -266,8 +266,8 @@ Only card type Tabs support addable & closeable.
}); });
} }
this.editableTabsValue2 = activeName; this.editableTabsValue = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); this.editableTabs = tabs.filter(tab => tab.name !== targetName);
} }
} }
} }
......
examples/docs/en-US/timeline.md
View file @ 15b5e316
...@@ -58,7 +58,7 @@ Size, color, and icons can be customized in node. ...@@ -58,7 +58,7 @@ Size, color, and icons can be customized in node.
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(activity, index) in activities2" v-for="(activity, index) in activities"
:key="index" :key="index"
:icon="activity.icon" :icon="activity.icon"
:type="activity.type" :type="activity.type"
...@@ -74,7 +74,7 @@ Size, color, and icons can be customized in node. ...@@ -74,7 +74,7 @@ Size, color, and icons can be customized in node.
export default { export default {
data() { data() {
return { return {
activities2: [{ activities: [{
content: 'Custom icon', content: 'Custom icon',
timestamp: '2018-04-12 20:46', timestamp: '2018-04-12 20:46',
size: 'large', size: 'large',
......
examples/docs/en-US/transfer.md
View file @ 15b5e316
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value1" v-model="value"
:data="data"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
}; };
return { return {
data: generateData(), data: generateData(),
value1: [1, 4] value: [1, 4]
}; };
} }
}; };
...@@ -45,15 +45,15 @@ You can search and filter data items. ...@@ -45,15 +45,15 @@ You can search and filter data items.
filterable filterable
:filter-method="filterMethod" :filter-method="filterMethod"
filter-placeholder="State Abbreviations" filter-placeholder="State Abbreviations"
v-model="value2" v-model="value"
:data="data2"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData2 = _ => { const generateData = _ => {
const data = []; const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']; const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']; const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
...@@ -67,8 +67,8 @@ You can search and filter data items. ...@@ -67,8 +67,8 @@ You can search and filter data items.
return data; return data;
}; };
return { return {
data2: generateData2(), data: generateData(),
value2: [], value: [],
filterMethod(query, item) { filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1; return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
} }
...@@ -90,7 +90,7 @@ You can customize list titles, button texts, render function for data items, che ...@@ -90,7 +90,7 @@ You can customize list titles, button texts, render function for data items, che
<div style="text-align: center"> <div style="text-align: center">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value3" v-model="value"
filterable filterable
:left-default-checked="[2, 3]" :left-default-checked="[2, 3]"
:right-default-checked="[1]" :right-default-checked="[1]"
...@@ -153,7 +153,7 @@ You can customize list titles, button texts, render function for data items, che ...@@ -153,7 +153,7 @@ You can customize list titles, button texts, render function for data items, che
}; };
return { return {
data: generateData(), data: generateData(),
value3: [1], value: [1],
value4: [1], value4: [1],
renderFunc(h, option) { renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>; return <span>{ option.key } - { option.label }</span>;
...@@ -178,19 +178,19 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If ...@@ -178,19 +178,19 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value5" v-model="value"
:props="{ :props="{
key: 'value', key: 'value',
label: 'desc' label: 'desc'
}" }"
:data="data3"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData3 = _ => { const generateData = _ => {
const data = []; const data = [];
for (let i = 1; i <= 15; i++) { for (let i = 1; i <= 15; i++) {
data.push({ data.push({
...@@ -202,8 +202,8 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If ...@@ -202,8 +202,8 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
return data; return data;
}; };
return { return {
data3: generateData3(), data: generateData(),
value5: [] value: []
}; };
} }
}; };
......
examples/docs/en-US/tree.md
View file @ 15b5e316
...@@ -138,7 +138,7 @@ Used for node selection. ...@@ -138,7 +138,7 @@ Used for node selection.
:::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node. :::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
```html ```html
<el-tree <el-tree
:props="props1" :props="props"
:load="loadNode1" :load="loadNode1"
lazy lazy
show-checkbox> show-checkbox>
...@@ -148,7 +148,7 @@ Used for node selection. ...@@ -148,7 +148,7 @@ Used for node selection.
export default { export default {
data() { data() {
return { return {
props1: { props: {
label: 'name', label: 'name',
children: 'zones', children: 'zones',
isLeaf: 'leaf' isLeaf: 'leaf'
...@@ -186,7 +186,7 @@ The checkbox of a node can be set as disabled. ...@@ -186,7 +186,7 @@ The checkbox of a node can be set as disabled.
:::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked. :::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
```html ```html
<el-tree <el-tree
:data="data3" :data="data"
:props="defaultProps" :props="defaultProps"
show-checkbox show-checkbox
@check-change="handleCheckChange"> @check-change="handleCheckChange">
...@@ -196,7 +196,7 @@ The checkbox of a node can be set as disabled. ...@@ -196,7 +196,7 @@ The checkbox of a node can be set as disabled.
export default { export default {
data() { data() {
return { return {
data3: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -242,7 +242,7 @@ Tree nodes can be initially expanded or checked ...@@ -242,7 +242,7 @@ Tree nodes can be initially expanded or checked
:::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree. :::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[2, 3]"
...@@ -254,7 +254,7 @@ Tree nodes can be initially expanded or checked ...@@ -254,7 +254,7 @@ Tree nodes can be initially expanded or checked
export default { export default {
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -305,7 +305,7 @@ Tree nodes can be initially expanded or checked ...@@ -305,7 +305,7 @@ Tree nodes can be initially expanded or checked
:::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required. :::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
default-expand-all default-expand-all
node-key="id" node-key="id"
...@@ -350,7 +350,7 @@ Tree nodes can be initially expanded or checked ...@@ -350,7 +350,7 @@ Tree nodes can be initially expanded or checked
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -405,7 +405,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as ...@@ -405,7 +405,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
<div class="block"> <div class="block">
<p>Using render-content</p> <p>Using render-content</p>
<el-tree <el-tree
:data="data4" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -416,7 +416,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as ...@@ -416,7 +416,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
<div class="block"> <div class="block">
<p>Using scoped slot</p> <p>Using scoped slot</p>
<el-tree <el-tree
:data="data5" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -483,8 +483,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as ...@@ -483,8 +483,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as
}] }]
}]; }];
return { return {
data4: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data)) data: JSON.parse(JSON.stringify(data))
} }
}, },
...@@ -543,7 +543,7 @@ Tree nodes can be filtered ...@@ -543,7 +543,7 @@ Tree nodes can be filtered
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="data2" :data="data"
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
...@@ -568,7 +568,7 @@ Tree nodes can be filtered ...@@ -568,7 +568,7 @@ Tree nodes can be filtered
data() { data() {
return { return {
filterText: '', filterText: '',
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -689,7 +689,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. ...@@ -689,7 +689,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
:::demo :::demo
```html ```html
<el-tree <el-tree
:data="data6" :data="data"
node-key="id" node-key="id"
default-expand-all default-expand-all
@node-drag-start="handleDragStart" @node-drag-start="handleDragStart"
...@@ -707,7 +707,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. ...@@ -707,7 +707,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
export default { export default {
data() { data() {
return { return {
data6: [{ data: [{
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
label: 'Level two 1-1', label: 'Level two 1-1',
......
examples/docs/es/tabs.md
View file @ 15b5e316
...@@ -210,14 +210,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ...@@ -210,14 +210,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<el-button <el-button
size="small" size="small"
@click="addTab(editableTabsValue2)" @click="addTab(editableTabsValue)"
> >
add tab add tab
</el-button> </el-button>
</div> </div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane <el-tab-pane
v-for="(item, index) in editableTabs2" v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
...@@ -229,8 +229,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ...@@ -229,8 +229,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
export default { export default {
data() { data() {
return { return {
editableTabsValue2: '2', editableTabsValue: '2',
editableTabs2: [{ editableTabs: [{
title: 'Tab 1', title: 'Tab 1',
name: '1', name: '1',
content: 'Tab 1 content' content: 'Tab 1 content'
...@@ -245,16 +245,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ...@@ -245,16 +245,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
methods: { methods: {
addTab(targetName) { addTab(targetName) {
let newTabName = ++this.tabIndex + ''; let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({ this.editableTabs.push({
title: 'New Tab', title: 'New Tab',
name: newTabName, name: newTabName,
content: 'New Tab content' content: 'New Tab content'
}); });
this.editableTabsValue2 = newTabName; this.editableTabsValue = newTabName;
}, },
removeTab(targetName) { removeTab(targetName) {
let tabs = this.editableTabs2; let tabs = this.editableTabs;
let activeName = this.editableTabsValue2; let activeName = this.editableTabsValue;
if (activeName === targetName) { if (activeName === targetName) {
tabs.forEach((tab, index) => { tabs.forEach((tab, index) => {
if (tab.name === targetName) { if (tab.name === targetName) {
...@@ -266,8 +266,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ...@@ -266,8 +266,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
}); });
} }
this.editableTabsValue2 = activeName; this.editableTabsValue = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); this.editableTabs = tabs.filter(tab => tab.name !== targetName);
} }
} }
} }
......
examples/docs/es/timeline.md
View file @ 15b5e316
...@@ -58,7 +58,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo. ...@@ -58,7 +58,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(activity, index) in activities2" v-for="(activity, index) in activities"
:key="index" :key="index"
:icon="activity.icon" :icon="activity.icon"
:type="activity.type" :type="activity.type"
...@@ -74,7 +74,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo. ...@@ -74,7 +74,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
export default { export default {
data() { data() {
return { return {
activities2: [{ activities: [{
content: 'Custom icon', content: 'Custom icon',
timestamp: '2018-04-12 20:46', timestamp: '2018-04-12 20:46',
size: 'large', size: 'large',
......
examples/docs/es/transfer.md
View file @ 15b5e316
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value1" v-model="value"
:data="data"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
}; };
return { return {
data: generateData(), data: generateData(),
value1: [1, 4] value: [1, 4]
}; };
} }
}; };
...@@ -45,15 +45,15 @@ Puede buscar y filtrar los items. ...@@ -45,15 +45,15 @@ Puede buscar y filtrar los items.
filterable filterable
:filter-method="filterMethod" :filter-method="filterMethod"
filter-placeholder="State Abbreviations" filter-placeholder="State Abbreviations"
v-model="value2" v-model="value"
:data="data2"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData2 = _ => { const generateData = _ => {
const data = []; const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']; const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']; const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
...@@ -67,8 +67,8 @@ Puede buscar y filtrar los items. ...@@ -67,8 +67,8 @@ Puede buscar y filtrar los items.
return data; return data;
}; };
return { return {
data2: generateData2(), data: generateData(),
value2: [], value: [],
filterMethod(query, item) { filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1; return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
} }
...@@ -90,7 +90,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item ...@@ -90,7 +90,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
<div style="text-align: center"> <div style="text-align: center">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value3" v-model="value"
filterable filterable
:left-default-checked="[2, 3]" :left-default-checked="[2, 3]"
:right-default-checked="[1]" :right-default-checked="[1]"
...@@ -153,7 +153,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item ...@@ -153,7 +153,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
}; };
return { return {
data: generateData(), data: generateData(),
value3: [1], value: [1],
value4: [1], value4: [1],
renderFunc(h, option) { renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>; return <span>{ option.key } - { option.label }</span>;
...@@ -179,19 +179,19 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el ...@@ -179,19 +179,19 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value5" v-model="value"
:props="{ :props="{
key: 'value', key: 'value',
label: 'desc' label: 'desc'
}" }"
:data="data3"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData3 = _ => { const generateData = _ => {
const data = []; const data = [];
for (let i = 1; i <= 15; i++) { for (let i = 1; i <= 15; i++) {
data.push({ data.push({
...@@ -203,8 +203,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el ...@@ -203,8 +203,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
return data; return data;
}; };
return { return {
data3: generateData3(), data: generateData(),
value5: [] value: []
}; };
} }
}; };
......
examples/docs/es/tree.md
View file @ 15b5e316
...@@ -138,7 +138,7 @@ Usado para la selección de nodos. ...@@ -138,7 +138,7 @@ Usado para la selección de nodos.
:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar. :::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
```html ```html
<el-tree <el-tree
:props="props1" :props="props"
:load="loadNode1" :load="loadNode1"
lazy lazy
show-checkbox> show-checkbox>
...@@ -148,7 +148,7 @@ Usado para la selección de nodos. ...@@ -148,7 +148,7 @@ Usado para la selección de nodos.
export default { export default {
data() { data() {
return { return {
props1: { props: {
label: 'name', label: 'name',
children: 'zones', children: 'zones',
isLeaf: 'leaf' isLeaf: 'leaf'
...@@ -186,7 +186,7 @@ El checkbox de un nodo se puede poner como desactivado. ...@@ -186,7 +186,7 @@ El checkbox de un nodo se puede poner como desactivado.
:::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar. :::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
```html ```html
<el-tree <el-tree
:data="data3" :data="data"
:props="defaultProps" :props="defaultProps"
show-checkbox show-checkbox
@check-change="handleCheckChange"> @check-change="handleCheckChange">
...@@ -196,7 +196,7 @@ El checkbox de un nodo se puede poner como desactivado. ...@@ -196,7 +196,7 @@ El checkbox de un nodo se puede poner como desactivado.
export default { export default {
data() { data() {
return { return {
data3: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -242,7 +242,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto. ...@@ -242,7 +242,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol. :::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[2, 3]"
...@@ -254,7 +254,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto. ...@@ -254,7 +254,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
export default { export default {
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -305,7 +305,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto. ...@@ -305,7 +305,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
:::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario. :::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
default-expand-all default-expand-all
node-key="id" node-key="id"
...@@ -350,7 +350,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto. ...@@ -350,7 +350,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -405,7 +405,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos ...@@ -405,7 +405,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
<div class="block"> <div class="block">
<p>Using render-content</p> <p>Using render-content</p>
<el-tree <el-tree
:data="data4" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -416,7 +416,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos ...@@ -416,7 +416,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
<div class="block"> <div class="block">
<p>Using scoped slot</p> <p>Using scoped slot</p>
<el-tree <el-tree
:data="data5" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -483,8 +483,8 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos ...@@ -483,8 +483,8 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
}] }]
}]; }];
return { return {
data4: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data)) data: JSON.parse(JSON.stringify(data))
} }
}, },
...@@ -543,7 +543,7 @@ Los nodos del árbol se pueden filtrar. ...@@ -543,7 +543,7 @@ Los nodos del árbol se pueden filtrar.
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="data2" :data="data"
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
...@@ -568,7 +568,7 @@ Los nodos del árbol se pueden filtrar. ...@@ -568,7 +568,7 @@ Los nodos del árbol se pueden filtrar.
data() { data() {
return { return {
filterText: '', filterText: '',
data2: [{ data: [{
id: 1, id: 1,
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
...@@ -689,7 +689,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` . ...@@ -689,7 +689,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
:::demo :::demo
```html ```html
<el-tree <el-tree
:data="data6" :data="data"
node-key="id" node-key="id"
default-expand-all default-expand-all
@node-drag-start="handleDragStart" @node-drag-start="handleDragStart"
...@@ -707,7 +707,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` . ...@@ -707,7 +707,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
export default { export default {
data() { data() {
return { return {
data6: [{ data: [{
label: 'Level one 1', label: 'Level one 1',
children: [{ children: [{
label: 'Level two 1-1', label: 'Level two 1-1',
......
examples/docs/fr-FR/tabs.md
View file @ 15b5e316
...@@ -210,14 +210,14 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. ...@@ -210,14 +210,14 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<el-button <el-button
size="small" size="small"
@click="addTab(editableTabsValue2)" @click="addTab(editableTabsValue)"
> >
Ajouter un onglet Ajouter un onglet
</el-button> </el-button>
</div> </div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane <el-tab-pane
v-for="(item, index) in editableTabs2" v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
...@@ -229,8 +229,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. ...@@ -229,8 +229,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
export default { export default {
data() { data() {
return { return {
editableTabsValue2: '2', editableTabsValue: '2',
editableTabs2: [{ editableTabs: [{
title: 'Onglet 1', title: 'Onglet 1',
name: '1', name: '1',
content: 'Contenu de l\'onglet 1' content: 'Contenu de l\'onglet 1'
...@@ -245,16 +245,16 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. ...@@ -245,16 +245,16 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
methods: { methods: {
addTab(targetName) { addTab(targetName) {
let newTabName = ++this.tabIndex + ''; let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({ this.editableTabs.push({
title: 'Nouvel onglet', title: 'Nouvel onglet',
name: newTabName, name: newTabName,
content: 'Contenu du nouvel onglet' content: 'Contenu du nouvel onglet'
}); });
this.editableTabsValue2 = newTabName; this.editableTabsValue = newTabName;
}, },
removeTab(targetName) { removeTab(targetName) {
let tabs = this.editableTabs2; let tabs = this.editableTabs;
let activeName = this.editableTabsValue2; let activeName = this.editableTabsValue;
if (activeName === targetName) { if (activeName === targetName) {
tabs.forEach((tab, index) => { tabs.forEach((tab, index) => {
if (tab.name === targetName) { if (tab.name === targetName) {
...@@ -266,8 +266,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. ...@@ -266,8 +266,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
}); });
} }
this.editableTabsValue2 = activeName; this.editableTabsValue = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); this.editableTabs = tabs.filter(tab => tab.name !== targetName);
} }
} }
} }
......
examples/docs/fr-FR/timeline.md
View file @ 15b5e316
...@@ -58,7 +58,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud. ...@@ -58,7 +58,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(activity, index) in activities2" v-for="(activity, index) in activities"
:key="index" :key="index"
:icon="activity.icon" :icon="activity.icon"
:type="activity.type" :type="activity.type"
...@@ -74,7 +74,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud. ...@@ -74,7 +74,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
export default { export default {
data() { data() {
return { return {
activities2: [{ activities: [{
content: 'Icône', content: 'Icône',
timestamp: '2018-04-12 20:46', timestamp: '2018-04-12 20:46',
size: 'large', size: 'large',
......
examples/docs/fr-FR/transfer.md
View file @ 15b5e316
...@@ -7,7 +7,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq ...@@ -7,7 +7,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value1" v-model="value"
:data="data"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
...@@ -28,7 +28,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq ...@@ -28,7 +28,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
}; };
return { return {
data: generateData(), data: generateData(),
value1: [1, 4] value: [1, 4]
}; };
} }
}; };
...@@ -47,15 +47,15 @@ Vous pouvez filtrer les options. ...@@ -47,15 +47,15 @@ Vous pouvez filtrer les options.
filterable filterable
:filter-method="filterMethod" :filter-method="filterMethod"
filter-placeholder="State Abbreviations" filter-placeholder="State Abbreviations"
v-model="value2" v-model="value"
:data="data2"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData2 = _ => { const generateData = _ => {
const data = []; const data = [];
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']; const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']; const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
...@@ -69,8 +69,8 @@ Vous pouvez filtrer les options. ...@@ -69,8 +69,8 @@ Vous pouvez filtrer les options.
return data; return data;
}; };
return { return {
data2: generateData2(), data: generateData(),
value2: [], value: [],
filterMethod(query, item) { filterMethod(query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1; return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;
} }
...@@ -92,7 +92,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r ...@@ -92,7 +92,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
<div style="text-align: center"> <div style="text-align: center">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value3" v-model="value"
filterable filterable
:left-default-checked="[2, 3]" :left-default-checked="[2, 3]"
:right-default-checked="[1]" :right-default-checked="[1]"
...@@ -155,7 +155,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r ...@@ -155,7 +155,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
}; };
return { return {
data: generateData(), data: generateData(),
value3: [1], value: [1],
value4: [1], value4: [1],
renderFunc(h, option) { renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>; return <span>{ option.key } - { option.label }</span>;
...@@ -181,19 +181,19 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos ...@@ -181,19 +181,19 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value5" v-model="value"
:props="{ :props="{
key: 'value', key: 'value',
label: 'desc' label: 'desc'
}" }"
:data="data3"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData3 = _ => { const generateData = _ => {
const data = []; const data = [];
for (let i = 1; i <= 15; i++) { for (let i = 1; i <= 15; i++) {
data.push({ data.push({
...@@ -205,8 +205,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos ...@@ -205,8 +205,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
return data; return data;
}; };
return { return {
data3: generateData3(), data: generateData(),
value5: [] value: []
}; };
} }
}; };
......
examples/docs/fr-FR/tree.md
View file @ 15b5e316
...@@ -138,7 +138,7 @@ Vous pouvez activer la sélection des noeuds. ...@@ -138,7 +138,7 @@ Vous pouvez activer la sélection des noeuds.
:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu. :::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
```html ```html
<el-tree <el-tree
:props="props1" :props="props"
:load="loadNode1" :load="loadNode1"
lazy lazy
show-checkbox> show-checkbox>
...@@ -148,7 +148,7 @@ Vous pouvez activer la sélection des noeuds. ...@@ -148,7 +148,7 @@ Vous pouvez activer la sélection des noeuds.
export default { export default {
data() { data() {
return { return {
props1: { props: {
label: 'name', label: 'name',
children: 'zones', children: 'zones',
isLeaf: 'leaf' isLeaf: 'leaf'
...@@ -186,7 +186,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement. ...@@ -186,7 +186,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement.
:::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées. :::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.
```html ```html
<el-tree <el-tree
:data="data3" :data="data"
:props="defaultProps" :props="defaultProps"
show-checkbox show-checkbox
@check-change="handleCheckChange"> @check-change="handleCheckChange">
...@@ -196,7 +196,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement. ...@@ -196,7 +196,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement.
export default { export default {
data() { data() {
return { return {
data3: [{ data: [{
id: 1, id: 1,
label: 'Niveau un 1', label: 'Niveau un 1',
children: [{ children: [{
...@@ -243,7 +243,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut. ...@@ -243,7 +243,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
:::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre. :::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[2, 3]"
...@@ -255,7 +255,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut. ...@@ -255,7 +255,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
export default { export default {
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Niveau un 1', label: 'Niveau un 1',
children: [{ children: [{
...@@ -306,7 +306,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut. ...@@ -306,7 +306,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
:::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis. :::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
default-expand-all default-expand-all
node-key="id" node-key="id"
...@@ -351,7 +351,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut. ...@@ -351,7 +351,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: 'Niveau un 1', label: 'Niveau un 1',
children: [{ children: [{
...@@ -407,7 +407,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô ...@@ -407,7 +407,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
<div class="block"> <div class="block">
<p>Avec render-content</p> <p>Avec render-content</p>
<el-tree <el-tree
:data="data4" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -418,7 +418,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô ...@@ -418,7 +418,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
<div class="block"> <div class="block">
<p>Avec un slot</p> <p>Avec un slot</p>
<el-tree <el-tree
:data="data5" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -485,8 +485,8 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô ...@@ -485,8 +485,8 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
}] }]
}]; }];
return { return {
data4: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data)) data: JSON.parse(JSON.stringify(data))
} }
}, },
...@@ -546,7 +546,7 @@ Les noeuds peuvent être filtrés par mot-clé. ...@@ -546,7 +546,7 @@ Les noeuds peuvent être filtrés par mot-clé.
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="data2" :data="data"
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
...@@ -571,7 +571,7 @@ Les noeuds peuvent être filtrés par mot-clé. ...@@ -571,7 +571,7 @@ Les noeuds peuvent être filtrés par mot-clé.
data() { data() {
return { return {
filterText: '', filterText: '',
data2: [{ data: [{
id: 1, id: 1,
label: 'Niveau un 1', label: 'Niveau un 1',
children: [{ children: [{
...@@ -692,7 +692,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab ...@@ -692,7 +692,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
:::demo :::demo
```html ```html
<el-tree <el-tree
:data="data6" :data="data"
node-key="id" node-key="id"
default-expand-all default-expand-all
@node-drag-start="handleDragStart" @node-drag-start="handleDragStart"
...@@ -710,7 +710,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab ...@@ -710,7 +710,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
export default { export default {
data() { data() {
return { return {
data6: [{ data: [{
label: 'Niveau un 1', label: 'Niveau un 1',
children: [{ children: [{
label: 'Niveau deux 1-1', label: 'Niveau deux 1-1',
......
examples/docs/zh-CN/tabs.md
View file @ 15b5e316
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
```html ```html
<template> <template>
<el-tabs v-model="activeName2" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
export default { export default {
data() { data() {
return { return {
activeName2: 'first' activeName: 'first'
}; };
}, },
methods: { methods: {
...@@ -208,14 +208,14 @@ ...@@ -208,14 +208,14 @@
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<el-button <el-button
size="small" size="small"
@click="addTab(editableTabsValue2)" @click="addTab(editableTabsValue)"
> >
add tab add tab
</el-button> </el-button>
</div> </div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab"> <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane <el-tab-pane
v-for="(item, index) in editableTabs2" v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
...@@ -227,8 +227,8 @@ ...@@ -227,8 +227,8 @@
export default { export default {
data() { data() {
return { return {
editableTabsValue2: '2', editableTabsValue: '2',
editableTabs2: [{ editableTabs: [{
title: 'Tab 1', title: 'Tab 1',
name: '1', name: '1',
content: 'Tab 1 content' content: 'Tab 1 content'
...@@ -243,16 +243,16 @@ ...@@ -243,16 +243,16 @@
methods: { methods: {
addTab(targetName) { addTab(targetName) {
let newTabName = ++this.tabIndex + ''; let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({ this.editableTabs.push({
title: 'New Tab', title: 'New Tab',
name: newTabName, name: newTabName,
content: 'New Tab content' content: 'New Tab content'
}); });
this.editableTabsValue2 = newTabName; this.editableTabsValue = newTabName;
}, },
removeTab(targetName) { removeTab(targetName) {
let tabs = this.editableTabs2; let tabs = this.editableTabs;
let activeName = this.editableTabsValue2; let activeName = this.editableTabsValue;
if (activeName === targetName) { if (activeName === targetName) {
tabs.forEach((tab, index) => { tabs.forEach((tab, index) => {
if (tab.name === targetName) { if (tab.name === targetName) {
...@@ -264,8 +264,8 @@ ...@@ -264,8 +264,8 @@
}); });
} }
this.editableTabsValue2 = activeName; this.editableTabsValue = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName); this.editableTabs = tabs.filter(tab => tab.name !== targetName);
} }
} }
} }
......
examples/docs/zh-CN/timeline.md
View file @ 15b5e316
...@@ -58,7 +58,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity， ...@@ -58,7 +58,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(activity, index) in activities2" v-for="(activity, index) in activities"
:key="index" :key="index"
:icon="activity.icon" :icon="activity.icon"
:type="activity.type" :type="activity.type"
...@@ -74,7 +74,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity， ...@@ -74,7 +74,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
export default { export default {
data() { data() {
return { return {
activities2: [{ activities: [{
content: '支持使用图标', content: '支持使用图标',
timestamp: '2018-04-12 20:46', timestamp: '2018-04-12 20:46',
size: 'large', size: 'large',
......
examples/docs/zh-CN/transfer.md
View file @ 15b5e316
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
:::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。 :::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
```html ```html
<template> <template>
<el-transfer v-model="value1" :data="data"></el-transfer> <el-transfer v-model="value" :data="data"></el-transfer>
</template> </template>
<script> <script>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
}; };
return { return {
data: generateData(), data: generateData(),
value1: [1, 4] value: [1, 4]
}; };
} }
}; };
...@@ -42,15 +42,15 @@ ...@@ -42,15 +42,15 @@
filterable filterable
:filter-method="filterMethod" :filter-method="filterMethod"
filter-placeholder="请输入城市拼音" filter-placeholder="请输入城市拼音"
v-model="value2" v-model="value"
:data="data2"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData2 = _ => { const generateData = _ => {
const data = []; const data = [];
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']; const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu']; const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
...@@ -64,8 +64,8 @@ ...@@ -64,8 +64,8 @@
return data; return data;
}; };
return { return {
data2: generateData2(), data: generateData(),
value2: [], value: [],
filterMethod(query, item) { filterMethod(query, item) {
return item.pinyin.indexOf(query) > -1; return item.pinyin.indexOf(query) > -1;
} }
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<div style="text-align: center"> <div style="text-align: center">
<el-transfer <el-transfer
style="text-align: left; display: inline-block" style="text-align: left; display: inline-block"
v-model="value3" v-model="value"
filterable filterable
:left-default-checked="[2, 3]" :left-default-checked="[2, 3]"
:right-default-checked="[1]" :right-default-checked="[1]"
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
}; };
return { return {
data: generateData(), data: generateData(),
value3: [1], value: [1],
value4: [1], value4: [1],
renderFunc(h, option) { renderFunc(h, option) {
return <span>{ option.key } - { option.label }</span>; return <span>{ option.key } - { option.label }</span>;
...@@ -175,19 +175,19 @@ ...@@ -175,19 +175,19 @@
```html ```html
<template> <template>
<el-transfer <el-transfer
v-model="value5" v-model="value"
:props="{ :props="{
key: 'value', key: 'value',
label: 'desc' label: 'desc'
}" }"
:data="data3"> :data="data">
</el-transfer> </el-transfer>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
const generateData3 = _ => { const generateData = _ => {
const data = []; const data = [];
for (let i = 1; i <= 15; i++) { for (let i = 1; i <= 15; i++) {
data.push({ data.push({
...@@ -199,8 +199,8 @@ ...@@ -199,8 +199,8 @@
return data; return data;
}; };
return { return {
data3: generateData3(), data: generateData(),
value5: [] value: []
}; };
} }
}; };
......
examples/docs/zh-CN/tree.md
View file @ 15b5e316
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。 :::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
```html ```html
<el-tree <el-tree
:props="props1" :props="props"
:load="loadNode1" :load="loadNode1"
lazy lazy
show-checkbox> show-checkbox>
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
export default { export default {
data() { data() {
return { return {
props1: { props: {
label: 'name', label: 'name',
children: 'zones', children: 'zones',
isLeaf: 'leaf' isLeaf: 'leaf'
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。 :::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[2, 3]"
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
export default { export default {
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: '一级 1', label: '一级 1',
children: [{ children: [{
...@@ -249,7 +249,7 @@ ...@@ -249,7 +249,7 @@
:::demo 通过`disabled`设置禁用状态。 :::demo 通过`disabled`设置禁用状态。
```html ```html
<el-tree <el-tree
:data="data3" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[2, 3]"
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
export default { export default {
data() { data() {
return { return {
data3: [{ data: [{
id: 1, id: 1,
label: '一级 2', label: '一级 2',
children: [{ children: [{
...@@ -304,7 +304,7 @@ ...@@ -304,7 +304,7 @@
:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。 :::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
```html ```html
<el-tree <el-tree
:data="data2" :data="data"
show-checkbox show-checkbox
default-expand-all default-expand-all
node-key="id" node-key="id"
...@@ -349,7 +349,7 @@ ...@@ -349,7 +349,7 @@
data() { data() {
return { return {
data2: [{ data: [{
id: 1, id: 1,
label: '一级 1', label: '一级 1',
children: [{ children: [{
...@@ -404,7 +404,7 @@ ...@@ -404,7 +404,7 @@
<div class="block"> <div class="block">
<p>使用 render-content</p> <p>使用 render-content</p>
<el-tree <el-tree
:data="data4" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -415,7 +415,7 @@ ...@@ -415,7 +415,7 @@
<div class="block"> <div class="block">
<p>使用 scoped slot</p> <p>使用 scoped slot</p>
<el-tree <el-tree
:data="data5" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
default-expand-all default-expand-all
...@@ -482,8 +482,8 @@ ...@@ -482,8 +482,8 @@
}] }]
}]; }];
return { return {
data4: JSON.parse(JSON.stringify(data)), data: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data)) data: JSON.parse(JSON.stringify(data))
} }
}, },
...@@ -542,7 +542,7 @@ ...@@ -542,7 +542,7 @@
<el-tree <el-tree
class="filter-tree" class="filter-tree"
:data="data2" :data="data"
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
:filter-node-method="filterNode" :filter-node-method="filterNode"
...@@ -567,7 +567,7 @@ ...@@ -567,7 +567,7 @@
data() { data() {
return { return {
filterText: '', filterText: '',
data2: [{ data: [{
id: 1, id: 1,
label: '一级 1', label: '一级 1',
children: [{ children: [{
...@@ -688,7 +688,7 @@ ...@@ -688,7 +688,7 @@
:::demo :::demo
```html ```html
<el-tree <el-tree
:data="data6" :data="data"
node-key="id" node-key="id"
default-expand-all default-expand-all
@node-drag-start="handleDragStart" @node-drag-start="handleDragStart"
...@@ -706,7 +706,7 @@ ...@@ -706,7 +706,7 @@
export default { export default {
data() { data() {
return { return {
data6: [{ data: [{
id: 1, id: 1,
label: '一级 1', label: '一级 1',
children: [{ children: [{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment