Skip to content

E
Element
Commit 43484202 authored by Dreamacro's avatar Dreamacro Committed by 杨奕
Browse files
Options

Update doc for Tree and DatePicker (#6113) 

* Update DateTimePicker doc

* Update Tree doc

* Update DateTimePicker doc

* Update Tree doc

* update doc

* Update datetime-picker.md
parent 78e947bc
Show whitespace changes
Inline Side-by-side
Showing with 202 additions and 30 deletions
examples/docs/en-US/datetime-picker.md
View file @ 43484202
......@@ -100,6 +100,10 @@
Select date and time in one picker.
:::tip
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
:::
### Date and time
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
......@@ -248,6 +252,7 @@ Select date and time in one picker.
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
### shortcuts
| Attribute | Description | Type | Accepted Values | Default |
......
examples/docs/en-US/tree.md
View file @ 43484202
......@@ -137,6 +137,12 @@
children: 'zones'
};
const props1 = {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
};
const defaultProps = {
children: 'children',
label: 'label'
......@@ -185,6 +191,23 @@
resolve(data);
}, 500);
},
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
......@@ -210,10 +233,16 @@
this.$refs.tree.setCheckedKeys([]);
},
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data);
data.children = data.children || [];
data.children.push(newChild);
},
remove(store, data) {
remove(store, node, data) {
const parent = node.parent;
const index = parent.data.children.findIndex(d => d.id === data.id);
parent.data.children.splice(index, 1);
store.remove(data);
},
......@@ -225,7 +254,7 @@
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -244,6 +273,7 @@
regions,
defaultProps,
props,
props1,
defaultCheckedKeys: [5],
defaultExpandedKeys: [2, 3],
filterText: ''
......@@ -326,7 +356,6 @@ Used for node selection. In the following example, data for each layer is acquir
::: demo
```html
<el-tree
:data="regions"
:props="props"
:load="loadNode"
lazy
......@@ -338,11 +367,6 @@ Used for node selection. In the following example, data for each layer is acquir
export default {
data() {
return {
regions: [{
'name': 'region1'
}, {
'name': 'region2'
}],
props: {
label: 'name',
children: 'zones'
......@@ -393,6 +417,52 @@ Used for node selection. In the following example, data for each layer is acquir
```
:::
### Custom leaf node in lazy mode
::: demo
```html
<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### Disabled checkbox
The checkbox of a node can be set as disabled.
......@@ -613,6 +683,10 @@ Tree nodes can be initially expanded or checked
### Custom node content
The content of tree nodes can be customized, so you can add icons or buttons as you will
:::warning
`Append` and `remove` do not change `data`
:::
::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
```html
<el-tree
......@@ -675,22 +749,28 @@ The content of tree nodes can be customized, so you can add icons or buttons as
methods: {
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data); // need change data by yourself
data.children = data.children || [];
data.children.push(newChild);
},
remove(store, data) {
store.remove(data);
remove(store, node, data) {
const parent = node.parent;
const index = parent.data.children.findIndex(d => d.id === data.id);
parent.data.children.splice(index, 1);
store.remove(data); // need change data by yourself
},
renderContent(h, { node, data, store }) {
return (
<span>
<span style="white-space: normal">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}
......@@ -878,6 +958,7 @@ Only one node among the same level can be expanded at one time.
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — |
| disabled | specify which node's checkbox disabled | boolean, function(data, node) | — | — |
| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — |
### Method
`Tree` has the following method, which returns the currently selected array of nodes.
......
examples/docs/zh-CN/datetime-picker.md
View file @ 43484202
......@@ -100,6 +100,10 @@
在同一个选择器里选择日期和时间
:::tip
DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其他选项可以参照 DatePicker 和 TimePicker。
:::
### 日期和时间点
:::demo 通过设置`type`属性为`datetime`，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
......@@ -247,6 +251,7 @@
|---------- |-------------- |---------- |-------------------------------- |-------- |
| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
examples/docs/zh-CN/tree.md
View file @ 43484202
......@@ -137,6 +137,12 @@
children: 'zones'
};
const props1 = {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
};
const defaultProps = {
children: 'children',
label: 'label'
......@@ -185,6 +191,23 @@
resolve(data);
}, 500);
},
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
},
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
......@@ -210,10 +233,16 @@
this.$refs.tree.setCheckedKeys([]);
},
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data);
data.children = data.children || [];
data.children.push(newChild);
},
remove(store, data) {
remove(store, node, data) {
const parent = node.parent;
const index = parent.data.children.findIndex(d => d.id === data.id);
parent.data.children.splice(index, 1);
store.remove(data);
},
......@@ -225,7 +254,7 @@
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
},
......@@ -244,6 +273,7 @@
regions,
defaultProps,
props,
props1,
defaultCheckedKeys: [5],
defaultExpandedKeys: [2, 3],
filterText: ''
......@@ -326,7 +356,6 @@
::: demo
```html
<el-tree
:data="regions"
:props="props"
:load="loadNode"
lazy
......@@ -338,11 +367,6 @@
export default {
data() {
return {
regions: [{
'name': 'region1'
}, {
'name': 'region2'
}],
props: {
label: 'name',
children: 'zones'
......@@ -393,6 +417,52 @@
```
:::
### 懒加载自定义叶子节点
::: demo
```html
<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
```
:::
### 默认展开和默认选中
可将 Tree 的某些节点设置为默认展开或默认选中
......@@ -612,6 +682,10 @@
### 自定义节点内容
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
:::warning
`append` 和 `remove` 方法不会改变 `data` 上的数据
:::
::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
```html
<el-tree
......@@ -674,22 +748,28 @@
methods: {
append(store, data) {
store.append({ id: id++, label: 'testtest', children: [] }, data);
const newChild = { id: id++, label: 'testtest', children: [] };
store.append(newChild, data); // append 不会改变 data
data.children = data.children || [];
data.children.push(newChild);
},
remove(store, data) {
store.remove(data);
remove(store, node, data) {
const parent = node.parent;
const index = parent.data.children.findIndex(d => d.id === data.id);
parent.data.children.splice(index, 1);
store.remove(data); // remove 不会改变 data
},
renderContent(h, { node, data, store }) {
return (
<span>
<span style="white-space: normal">
<span>
<span>{node.label}</span>
</span>
<span style="float: right; margin-right: 20px">
<el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
<el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
<el-button size="mini" on-click={ () => this.remove(store, node, data) }>Delete</el-button>
</span>
</span>);
}
......@@ -877,6 +957,7 @@
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
| children | 指定子树为节点对象的某个属性值 | string, function(data, node) | — | — |
| disabled | 指定节点选择框是否禁用 | boolean, function(data, node) | — | — |
| isLeaf | 指定节点是否为叶子节点 | boolean, function(data, node) | — | — |
### 方法
`Tree` 拥有如下方法，返回目前被选中的节点数组：
......
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