mirror of https://github.com/ElemeFE/element
Docs:rename variable in Tree,Transfer,Timeline,Tabs docs (#14602)
刘鹏龙
hetech
parent
7b24f82586
commit
15b5e31671
|
|
@ -210,14 +210,14 @@ Only card type Tabs support addable & closeable.
|
|||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
@click="addTab(editableTabsValue)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</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
|
||||
v-for="(item, index) in editableTabs2"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
|
|
@ -229,8 +229,8 @@ Only card type Tabs support addable & closeable.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
|
|
@ -245,16 +245,16 @@ Only card type Tabs support addable & closeable.
|
|||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
|
|
@ -266,8 +266,8 @@ Only card type Tabs support addable & closeable.
|
|||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Size, color, and icons can be customized in node.
|
|||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities2"
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:type="activity.type"
|
||||
|
|
@ -74,7 +74,7 @@ Size, color, and icons can be customized in node.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activities2: [{
|
||||
activities: [{
|
||||
content: 'Custom icon',
|
||||
timestamp: '2018-04-12 20:46',
|
||||
size: 'large',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
value: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -45,15 +45,15 @@ You can search and filter data items.
|
|||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData2 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||||
|
|
@ -67,8 +67,8 @@ You can search and filter data items.
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
data: generateData(),
|
||||
value: [],
|
||||
filterMethod(query, item) {
|
||||
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
|
|||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
|
|
@ -153,7 +153,7 @@ You can customize list titles, button texts, render function for data items, che
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
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
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData3 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
|
|
@ -202,8 +202,8 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value5: []
|
||||
data: generateData(),
|
||||
value: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
|
|
@ -148,7 +148,7 @@ Used for node selection.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
|
|
@ -196,7 +196,7 @@ The checkbox of a node can be set as disabled.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data3: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
|
|
@ -254,7 +254,7 @@ Tree nodes can be initially expanded or checked
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
|
|
@ -350,7 +350,7 @@ Tree nodes can be initially expanded or checked
|
|||
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -405,7 +405,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
|
|||
<div class="block">
|
||||
<p>Using render-content</p>
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -416,7 +416,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
|
|||
<div class="block">
|
||||
<p>Using scoped slot</p>
|
||||
<el-tree
|
||||
:data="data5"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -483,8 +483,8 @@ The content of tree nodes can be customized, so you can add icons or buttons as
|
|||
}]
|
||||
}];
|
||||
return {
|
||||
data4: JSON.parse(JSON.stringify(data)),
|
||||
data5: JSON.parse(JSON.stringify(data))
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
data: JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -543,7 +543,7 @@ Tree nodes can be filtered
|
|||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
|
|
@ -568,7 +568,7 @@ Tree nodes can be filtered
|
|||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -689,7 +689,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
|
|||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data6"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
|
|
@ -707,7 +707,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data6: [{
|
||||
data: [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1',
|
||||
|
|
|
|||
|
|
@ -210,14 +210,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
@click="addTab(editableTabsValue)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</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
|
||||
v-for="(item, index) in editableTabs2"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
|
|
@ -229,8 +229,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
|
|
@ -245,16 +245,16 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
|
|
@ -266,8 +266,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
|
|||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
|
|||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities2"
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:type="activity.type"
|
||||
|
|
@ -74,7 +74,7 @@ El tamaño, el color y los iconos se pueden personalizar en el nodo.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activities2: [{
|
||||
activities: [{
|
||||
content: 'Custom icon',
|
||||
timestamp: '2018-04-12 20:46',
|
||||
size: 'large',
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
value: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -45,15 +45,15 @@ Puede buscar y filtrar los items.
|
|||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData2 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||||
|
|
@ -67,8 +67,8 @@ Puede buscar y filtrar los items.
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
data: generateData(),
|
||||
value: [],
|
||||
filterMethod(query, item) {
|
||||
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
|
|||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
|
|
@ -153,7 +153,7 @@ Puede personalizar los títulos, botones, la función de renderizado de los item
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
|
|
@ -179,19 +179,19 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData3 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
|
|
@ -203,8 +203,8 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value5: []
|
||||
data: generateData(),
|
||||
value: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
|
|
@ -148,7 +148,7 @@ Usado para la selección de nodos.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
|
|
@ -196,7 +196,7 @@ El checkbox de un nodo se puede poner como desactivado.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data3: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
|
|
@ -254,7 +254,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
|
|
@ -350,7 +350,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
|
|||
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -405,7 +405,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
|
|||
<div class="block">
|
||||
<p>Using render-content</p>
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -416,7 +416,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
|
|||
<div class="block">
|
||||
<p>Using scoped slot</p>
|
||||
<el-tree
|
||||
:data="data5"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -483,8 +483,8 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
|
|||
}]
|
||||
}];
|
||||
return {
|
||||
data4: JSON.parse(JSON.stringify(data)),
|
||||
data5: JSON.parse(JSON.stringify(data))
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
data: JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -543,7 +543,7 @@ Los nodos del árbol se pueden filtrar.
|
|||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
|
|
@ -568,7 +568,7 @@ Los nodos del árbol se pueden filtrar.
|
|||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
|
|
@ -689,7 +689,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
|
|||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data6"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
|
|
@ -707,7 +707,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data6: [{
|
||||
data: [{
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
label: 'Level two 1-1',
|
||||
|
|
|
|||
|
|
@ -210,14 +210,14 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
|
|||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
@click="addTab(editableTabsValue)"
|
||||
>
|
||||
Ajouter un onglet
|
||||
</el-button>
|
||||
</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
|
||||
v-for="(item, index) in editableTabs2"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
|
|
@ -229,8 +229,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Onglet 1',
|
||||
name: '1',
|
||||
content: 'Contenu de l\'onglet 1'
|
||||
|
|
@ -245,16 +245,16 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
|
|||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
this.editableTabs.push({
|
||||
title: 'Nouvel onglet',
|
||||
name: newTabName,
|
||||
content: 'Contenu du nouvel onglet'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
|
|
@ -266,8 +266,8 @@ Seuls les onglets de type carte supportent l'ajout et la suppression.
|
|||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
|
|||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities2"
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:type="activity.type"
|
||||
|
|
@ -74,7 +74,7 @@ Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activities2: [{
|
||||
activities: [{
|
||||
content: 'Icône',
|
||||
timestamp: '2018-04-12 20:46',
|
||||
size: 'large',
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value1"
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
|
@ -28,7 +28,7 @@ Permet de transférer des options d'une liste à une autre de manière ergonomiq
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
value: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -47,15 +47,15 @@ Vous pouvez filtrer les options.
|
|||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="State Abbreviations"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData2 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
|
||||
|
|
@ -69,8 +69,8 @@ Vous pouvez filtrer les options.
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
data: generateData(),
|
||||
value: [],
|
||||
filterMethod(query, item) {
|
||||
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
|
|||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
|
|
@ -155,7 +155,7 @@ Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de r
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
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
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData3 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
|
|
@ -205,8 +205,8 @@ Par défaut, Transfer utilise `key`, `label` et `disabled` de vos objets. Si vos
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value5: []
|
||||
data: generateData(),
|
||||
value: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
|
|
@ -148,7 +148,7 @@ Vous pouvez activer la sélection des noeuds.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange">
|
||||
|
|
@ -196,7 +196,7 @@ Les checkbox des noeuds peuvent être désactivées individuellement.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data3: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Niveau un 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
|
|
@ -255,7 +255,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Niveau un 1',
|
||||
children: [{
|
||||
|
|
@ -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.
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
|
|
@ -351,7 +351,7 @@ Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
|
|||
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Niveau un 1',
|
||||
children: [{
|
||||
|
|
@ -407,7 +407,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
|
|||
<div class="block">
|
||||
<p>Avec render-content</p>
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -418,7 +418,7 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
|
|||
<div class="block">
|
||||
<p>Avec un slot</p>
|
||||
<el-tree
|
||||
:data="data5"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -485,8 +485,8 @@ Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icô
|
|||
}]
|
||||
}];
|
||||
return {
|
||||
data4: JSON.parse(JSON.stringify(data)),
|
||||
data5: JSON.parse(JSON.stringify(data))
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
data: JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -546,7 +546,7 @@ Les noeuds peuvent être filtrés par mot-clé.
|
|||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
|
|
@ -571,7 +571,7 @@ Les noeuds peuvent être filtrés par mot-clé.
|
|||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: 'Niveau un 1',
|
||||
children: [{
|
||||
|
|
@ -692,7 +692,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
|
|||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data6"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
|
|
@ -710,7 +710,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data6: [{
|
||||
data: [{
|
||||
label: 'Niveau un 1',
|
||||
children: [{
|
||||
label: 'Niveau deux 1-1',
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
```html
|
||||
<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="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName2: 'first'
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -208,14 +208,14 @@
|
|||
<div style="margin-bottom: 20px;">
|
||||
<el-button
|
||||
size="small"
|
||||
@click="addTab(editableTabsValue2)"
|
||||
@click="addTab(editableTabsValue)"
|
||||
>
|
||||
add tab
|
||||
</el-button>
|
||||
</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
|
||||
v-for="(item, index) in editableTabs2"
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
|
|
@ -227,8 +227,8 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
editableTabsValue2: '2',
|
||||
editableTabs2: [{
|
||||
editableTabsValue: '2',
|
||||
editableTabs: [{
|
||||
title: 'Tab 1',
|
||||
name: '1',
|
||||
content: 'Tab 1 content'
|
||||
|
|
@ -243,16 +243,16 @@
|
|||
methods: {
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs2.push({
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue2 = newTabName;
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs2;
|
||||
let activeName = this.editableTabsValue2;
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
|
|
@ -264,8 +264,8 @@
|
|||
});
|
||||
}
|
||||
|
||||
this.editableTabsValue2 = activeName;
|
||||
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
|
|||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(activity, index) in activities2"
|
||||
v-for="(activity, index) in activities"
|
||||
:key="index"
|
||||
:icon="activity.icon"
|
||||
:type="activity.type"
|
||||
|
|
@ -74,7 +74,7 @@ Timeline 可拆分成多个按照时间戳正序或倒序排列的 activity，
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
activities2: [{
|
||||
activities: [{
|
||||
content: '支持使用图标',
|
||||
timestamp: '2018-04-12 20:46',
|
||||
size: 'large',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
:::demo Transfer 的数据通过 `data` 属性传入。数据需要是一个对象数组，每个对象有以下属性：`key` 为数据的唯一性标识，`label` 为显示文本，`disabled` 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 `v-model` 的变量，值为数据项的 `key` 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 `v-model` 绑定的变量赋予一个初始值。
|
||||
```html
|
||||
<template>
|
||||
<el-transfer v-model="value1" :data="data"></el-transfer>
|
||||
<el-transfer v-model="value" :data="data"></el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value1: [1, 4]
|
||||
value: [1, 4]
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -42,15 +42,15 @@
|
|||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入城市拼音"
|
||||
v-model="value2"
|
||||
:data="data2">
|
||||
v-model="value"
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData2 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
|
||||
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data2: generateData2(),
|
||||
value2: [],
|
||||
data: generateData(),
|
||||
value: [],
|
||||
filterMethod(query, item) {
|
||||
return item.pinyin.indexOf(query) > -1;
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
<div style="text-align: center">
|
||||
<el-transfer
|
||||
style="text-align: left; display: inline-block"
|
||||
v-model="value3"
|
||||
v-model="value"
|
||||
filterable
|
||||
:left-default-checked="[2, 3]"
|
||||
:right-default-checked="[1]"
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
};
|
||||
return {
|
||||
data: generateData(),
|
||||
value3: [1],
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return <span>{ option.key } - { option.label }</span>;
|
||||
|
|
@ -175,19 +175,19 @@
|
|||
```html
|
||||
<template>
|
||||
<el-transfer
|
||||
v-model="value5"
|
||||
v-model="value"
|
||||
:props="{
|
||||
key: 'value',
|
||||
label: 'desc'
|
||||
}"
|
||||
:data="data3">
|
||||
:data="data">
|
||||
</el-transfer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const generateData3 = _ => {
|
||||
const generateData = _ => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
|
|
@ -199,8 +199,8 @@
|
|||
return data;
|
||||
};
|
||||
return {
|
||||
data3: generateData3(),
|
||||
value5: []
|
||||
data: generateData(),
|
||||
value: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@
|
|||
:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
|
||||
```html
|
||||
<el-tree
|
||||
:props="props1"
|
||||
:props="props"
|
||||
:load="loadNode1"
|
||||
lazy
|
||||
show-checkbox>
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
props1: {
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'zones',
|
||||
isLeaf: 'leaf'
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
:::demo 通过`disabled`设置禁用状态。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data3"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-expanded-keys="[2, 3]"
|
||||
|
|
@ -260,7 +260,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data3: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
|
||||
```html
|
||||
<el-tree
|
||||
:data="data2"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
node-key="id"
|
||||
|
|
@ -349,7 +349,7 @@
|
|||
|
||||
data() {
|
||||
return {
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
|
|
@ -404,7 +404,7 @@
|
|||
<div class="block">
|
||||
<p>使用 render-content</p>
|
||||
<el-tree
|
||||
:data="data4"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -415,7 +415,7 @@
|
|||
<div class="block">
|
||||
<p>使用 scoped slot</p>
|
||||
<el-tree
|
||||
:data="data5"
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
|
|
@ -482,8 +482,8 @@
|
|||
}]
|
||||
}];
|
||||
return {
|
||||
data4: JSON.parse(JSON.stringify(data)),
|
||||
data5: JSON.parse(JSON.stringify(data))
|
||||
data: JSON.parse(JSON.stringify(data)),
|
||||
data: JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -542,7 +542,7 @@
|
|||
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="data2"
|
||||
:data="data"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
|
|
@ -688,7 +688,7 @@
|
|||
:::demo
|
||||
```html
|
||||
<el-tree
|
||||
:data="data6"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
@node-drag-start="handleDragStart"
|
||||
|
|
@ -706,7 +706,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
data6: [{
|
||||
data: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
|
|
|
|||
Loading…
Reference in New Issue