mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-16 11:44:01 +08:00
Docs:rename variable in Tree,Transfer,Timeline,Tabs docs (#14602)
This commit is contained in:
刘鹏龙
@@ -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: [{
|
||||
|
||||
Reference in New Issue
Block a user