diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index ff473cb8e..27381fba5 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -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 |
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index 659d20b3f..a8dfb2370 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -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 @@
this.append(store, data) }>Append
- this.remove(store, data) }>Delete
+ this.remove(store, node, data) }>Delete
);
},
@@ -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
+
+
+
+```
+:::
+
### 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
d.id === data.id);
+ parent.data.children.splice(index, 1);
+ store.remove(data); // need change data by yourself
},
renderContent(h, { node, data, store }) {
return (
-
+
{node.label}
this.append(store, data) }>Append
- this.remove(store, data) }>Delete
+ this.remove(store, node, data) }>Delete
);
}
@@ -877,7 +957,8 @@ 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) | — | — |
+| 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.
diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
index 7d4d30ee0..8b54cb1cb 100644
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/examples/docs/zh-CN/datetime-picker.md
@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
index 850b9372d..c20346363 100644
--- a/examples/docs/zh-CN/tree.md
+++ b/examples/docs/zh-CN/tree.md
@@ -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 @@
this.append(store, data) }>Append
- this.remove(store, data) }>Delete
+ this.remove(store, node, data) }>Delete
);
},
@@ -244,6 +273,7 @@
regions,
defaultProps,
props,
+ props1,
defaultCheckedKeys: [5],
defaultExpandedKeys: [2, 3],
filterText: ''
@@ -326,7 +356,6 @@
::: demo
```html
+
+
+
+```
+:::
+
### 默认展开和默认选中
可将 Tree 的某些节点设置为默认展开或默认选中
@@ -612,6 +682,10 @@
### 自定义节点内容
节点的内容支持自定义，可以在节点区添加按钮或图标等内容
+:::warning
+`append` 和 `remove` 方法不会改变 `data` 上的数据
+:::
+
::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
```html
d.id === data.id);
+ parent.data.children.splice(index, 1);
+ store.remove(data); // remove 不会改变 data
},
renderContent(h, { node, data, store }) {
return (
-
+
{node.label}
this.append(store, data) }>Append
- this.remove(store, data) }>Delete
+ this.remove(store, node, data) }>Delete
);
}
@@ -876,7 +956,8 @@
| -------- | ----------------- | ------ | ---- | ---- |
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
| children | 指定子树为节点对象的某个属性值 | string, function(data, node) | — | — |
-| disabled | 指定节点选择框是否禁用 | boolean, function(data, node) | — | — |
+| disabled | 指定节点选择框是否禁用 | boolean, function(data, node) | — | — |
+| isLeaf | 指定节点是否为叶子节点 | boolean, function(data, node) | — | — |
### 方法
`Tree` 拥有如下方法，返回目前被选中的节点数组：