diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index f4e54ee79..e9929fd82 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -608,6 +608,7 @@ Search data from server-side.
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean/object | — | false |
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|name | same as `name` in native input | string | — | — |
+| readonly | same as `readonly` in native input | boolean | — | false |
|max | same as `max` in native input | * | — | — |
|min | same as `min` in native input | * | — | — |
|resize| control the resizability | string | none, both, horizontal, vertical | — |
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index 7cb0f868a..7167c0d75 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -35,6 +35,44 @@
}]
}];
+ const data2 = [{
+ id: 1,
+ label: 'Level one 1',
+ children: [{
+ id: 4,
+ label: 'Level two 1-1',
+ children: [{
+ id: 9,
+ label: 'Level three 1-1-1'
+ }, {
+ id: 10,
+ label: 'Level three 1-1-2'
+ }]
+ }]
+ }, {
+ id: 2,
+ label: 'Level one 2',
+ children: [{
+ id: 5,
+ label: 'Level two 2-1'
+ }, {
+ id: 6,
+ label: 'Level two 2-2'
+ }]
+ }, {
+ id: 3,
+ label: 'Level one 3',
+ children: [{
+ id: 7,
+ label: 'Level two 3-1'
+ }, {
+ id: 8,
+ label: 'Level two 3-2'
+ }]
+ }];
+
+ let id = 1000;
+
const regions = [{
'name': 'region1'
}, {
@@ -48,12 +86,18 @@
children: 'zones'
};
- var defaultProps = {
+ const defaultProps = {
children: 'children',
label: 'label'
};
export default {
+ watch: {
+ filterText(val) {
+ this.$refs.tree2.filter(val);
+ }
+ },
+
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
@@ -89,15 +133,68 @@
resolve(data);
}, 500);
+ },
+ getCheckedNodes() {
+ console.log(this.$refs.tree.getCheckedNodes());
+ },
+ getCheckedKeys() {
+ console.log(this.$refs.tree.getCheckedKeys());
+ },
+ setCheckedNodes() {
+ this.$refs.tree.setCheckedNodes([
+ {
+ id: 5,
+ label: '二级 2-1'
+ },
+ {
+ id: 9,
+ label: '三级 1-1-1'
+ }
+ ]);
+ },
+ setCheckedKeys() {
+ this.$refs.tree.setCheckedKeys([8]);
+ },
+ resetChecked() {
+ this.$refs.tree.setCheckedKeys([]);
+ },
+ append(store, data) {
+ store.append({ id: id++, label: 'testtest', children: [] }, data);
+ },
+
+ remove(store, data) {
+ store.remove(data);
+ },
+
+ renderContent(h, { node, data, store }) {
+ return (
+
+
+ {node.label}
+
+
+ this.append(store, data) }>Append
+ this.remove(store, data) }>Delete
+
+ );
+ },
+
+ filterNode(value, data) {
+ if (!value) return true;
+ return data.label.indexOf(value) !== -1;
}
},
data() {
return {
data,
+ data2,
regions,
defaultProps,
- props
+ props,
+ defaultCheckedKeys: [5],
+ defaultExpandedKeys: [2, 3],
+ filterText: ''
};
}
};
@@ -244,13 +341,351 @@ Used for node selection. In the following example, data for each layer is acquir
```
:::
+### Default expanded and default checked
+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
+
+
+
+
+```
+:::
+
+### Checking tree nodes
+
+::: 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
+
+
+
+
+ get by node
+ get by key
+ set by node
+ set by key
+ reset
+
+
+
+```
+:::
+
+### Custom node content
+The content of tree nodes can be customized, so you can add icons or buttons as you will
+
+::: 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.
+```html
+
+
+
+
+```
+:::
+
+### Tree node filtering
+Tree nodes can be filtered
+
+::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
+```html
+
+
+
+
+
+
+
+```
+:::
+
### Accordion
Only one node among the same level can be expanded at one time.
::: demo
```html
-
+
+
+```
+:::
+
+### 树节点的选择
+
+::: demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
+```html
+
+
+
+
+ 通过 node 获取
+ 通过 key 获取
+ 通过 node 设置
+ 通过 key 设置
+ 清空
+
+
+
+```
+:::
+
+### 自定义节点内容
+节点的内容支持自定义，可以在节点区添加按钮或图标等内容
+
+::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。
+```html
+
+
+
+
+```
+:::
+
+### 节点过滤
+通过关键字过滤树节点
+
+::: demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
+```html
+
+
+
+
+
+
+
+```
+:::
+
### 手风琴模式
每次只打开一个同级树节点展开
::: demo
```html
-
+
+