Tree: add indent, update docs

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 | — |

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 (
+          <span>
+            <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>
+            </span>
+          </span>);
+      },
+  
+      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
+<el-tree
+  :data="data2"
+  show-checkbox
+  node-key="id"
+  :default-expanded-keys="[2, 3]"
+  :default-checked-keys="[5]"
+  :props="defaultProps">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        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'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 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
+<el-tree
+  :data="data2"
+  show-checkbox
+  default-expand-all
+  node-key="id"
+  ref="tree"
+  highlight-current
+  :props="defaultProps">
+</el-tree>
+
+<div class="buttons">
+  <el-button @click="getCheckedNodes">get by node</el-button>
+  <el-button @click="getCheckedKeys">get by key</el-button>
+  <el-button @click="setCheckedNodes">set by node</el-button>
+  <el-button @click="setCheckedKeys">set by key</el-button>
+  <el-button @click="resetChecked">reset</el-button>
+</div>
+
+<script>
+  export default {
+    methods: {
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([{
+          id: 5,
+          label: 'Level two 2-1'
+        }, {
+          id: 9,
+          label: 'Level three 1-1-1'
+        }]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([8]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      }
+    },
+    
+    data() {
+      return {
+        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'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 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
+<el-tree
+  :data="data2"
+  :props="defaultProps"
+  show-checkbox
+  node-key="id"
+  default-expand-all
+  :expand-on-click-node="false"
+  :render-content="renderContent">
+</el-tree>
+
+<script>
+  let id = 1000;
+  
+  export default {
+    data() {
+      return {
+        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'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      }
+    },
+    
+    methods: {
+      append(store, data) {
+        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      },
+      
+      remove(store, data) {
+        store.remove(data);
+      },
+      
+      renderContent(h, { node, data, store }) {
+        return (
+          <span>
+            <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>
+            </span>
+          </span>);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 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
+<el-input
+  placeholder="Filter keyword"
+  v-model="filterText">
+</el-input>
+
+<el-tree
+  class="filter-tree"
+  :data="data2"
+  :props="defaultProps"
+  default-expand-all
+  :filter-node-method="filterNode"
+  ref="tree2">
+</el-tree>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+
+    data() {
+      return {
+        filterText: '',
+        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'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Accordion
 
 Only one node among the same level can be expanded at one time.
 
 ::: demo
 ```html
-<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
+<el-tree
+  :data="data"
+  :props="defaultProps"
+  accordion
+  @node-click="handleNodeClick">
+</el-tree>
 
 <script>
   export default {
@@ -327,6 +762,7 @@ Only one node among the same level can be expanded at one time.
 | default-checked-keys  | array of keys of initially checked nodes | array                       | —               | —       |
 | filter-node-method    | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | —               | —       |
 | accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |
+| indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |
 
 ### props
 | Attribute | Description                              | Type   | Accepted Values | Default |

examples/docs/zh-CN/input.md

@@ -765,6 +765,7 @@ export default {
 | autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
 | auto-complete | 原生属性，自动补全 | string | on, off | off |
 | name | 原生属性 | string | — | — |
+| readonly | 原生属性，是否只读 | boolean | — | false |
 | max | 原生属性，设置最大值 | * | — | — |
 | min | 原生属性，设置最小值 | * | — | — |
 | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |

examples/docs/zh-CN/tree.md

@@ -1,12 +1,22 @@
 <style>
-  .leaf {
-    width: 20px;
-    background: #ddd;
-  }
-
-  .folder {
-    width: 20px;
-    background: #888;
+  .demo-tree {
+    .leaf {
+      width: 20px;
+      background: #ddd;
+    }
+  
+    .folder {
+      width: 20px;
+      background: #888;
+    }
+    
+    .buttons {
+      margin-top: 20px;
+    }
+    
+    .filter-tree {
+      margin-top: 20px;
+    }
   }
 </style>
 
@@ -47,6 +57,44 @@
     }]
   }];
 
+  const data2 = [{
+    id: 1,
+    label: '一级 1',
+    children: [{
+      id: 4,
+      label: '二级 1-1',
+      children: [{
+        id: 9,
+        label: '三级 1-1-1'
+      }, {
+        id: 10,
+        label: '三级 1-1-2'
+      }]
+    }]
+  }, {
+    id: 2,
+    label: '一级 2',
+    children: [{
+      id: 5,
+      label: '二级 2-1'
+    }, {
+      id: 6,
+      label: '二级 2-2'
+    }]
+  }, {
+    id: 3,
+    label: '一级 3',
+    children: [{
+      id: 7,
+      label: '二级 3-1'
+    }, {
+      id: 8,
+      label: '二级 3-2'
+    }]
+  }];
+
+  let id = 1000;
+
   const regions = [{
     'name': 'region1'
   }, {
@@ -60,12 +108,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);
@@ -101,15 +155,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 (
+          <span>
+            <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>
+            </span>
+          </span>);
+      },
+  
+      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: ''
       };
     }
   };
@@ -256,13 +363,351 @@
 ```
 :::
 
+### 默认展开和默认选中
+可将 Tree 的某些节点设置为默认展开或默认选中
+
+::: demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
+```html
+<el-tree
+  :data="data2"
+  show-checkbox
+  node-key="id"
+  :default-expanded-keys="[2, 3]"
+  :default-checked-keys="[5]"
+  :props="defaultProps">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data2: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 树节点的选择
+
+::: demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
+```html
+<el-tree
+  :data="data2"
+  show-checkbox
+  default-expand-all
+  node-key="id"
+  ref="tree"
+  highlight-current
+  :props="defaultProps">
+</el-tree>
+
+<div class="buttons">
+  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+  <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+  <el-button @click="resetChecked">清空</el-button>
+</div>
+
+<script>
+  export default {
+    methods: {
+      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([]);
+      }
+    },
+    
+    data() {
+      return {
+        data2: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
+### 自定义节点内容
+节点的内容支持自定义，可以在节点区添加按钮或图标等内容
+
+::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。
+```html
+<el-tree
+  :data="data2"
+  :props="defaultProps"
+  show-checkbox
+  node-key="id"
+  default-expand-all
+  :expand-on-click-node="false"
+  :render-content="renderContent">
+</el-tree>
+
+<script>
+  let id = 1000;
+
+  export default {
+    data() {
+      return {
+        data2: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      }
+    },
+
+    methods: {
+      append(store, data) {
+        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      },
+
+      remove(store, data) {
+        store.remove(data);
+      },
+  
+      renderContent(h, { node, data, store }) {
+        return (
+          <span>
+            <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>
+            </span>
+          </span>);
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 节点过滤
+通过关键字过滤树节点
+
+::: demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
+```html
+<el-input
+  placeholder="输入关键字进行过滤"
+  v-model="filterText">
+</el-input>
+
+<el-tree
+  class="filter-tree"
+  :data="data2"
+  :props="defaultProps"
+  default-expand-all
+  :filter-node-method="filterNode"
+  ref="tree2">
+</el-tree>
+
+<script>
+  export default {
+    watch: {
+      filterText(val) {
+        this.$refs.tree2.filter(val);
+      }
+    },
+
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.label.indexOf(value) !== -1;
+      }
+    },
+    
+    data() {
+      return {
+        filterText: '',
+        data2: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### 手风琴模式
 
 每次只打开一个同级树节点展开
 
 ::: demo
 ```html
-<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
+<el-tree
+  :data="data"
+  :props="defaultProps"
+  accordion
+  @node-click="handleNodeClick">
+</el-tree>
 
 <script>
   export default {
@@ -339,6 +784,7 @@
 | default-checked-keys  | 默认勾选的节点的 key 的数组                         | array                       | —    | —     |
 | filter-node-method    | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | —    | —     |
 | accordion             | 是否每次只打开一个同级树节点展开                         | boolean                     | —    | false |
+| indent                | 相邻级节点间的水平缩进，单位为像素                        | number                     | —    | 16 |
 
 ### props
 | 参数       | 说明                | 类型     | 可选值  | 默认值  |

packages/theme-default/src/message-box.css

@@ -14,7 +14,6 @@
     width: var(--msgbox-width);
     border-radius: var(--msgbox-border-radius);
     font-size: var(--msgbox-font-size);
-    -webkit-user-select: none;
     overflow: hidden;
     backface-visibility: hidden;
     @e wrapper {

packages/tree/src/tree-node.vue

@@ -8,7 +8,7 @@
       'is-hidden': !node.visible
     }">
     <div class="el-tree-node__content"
-      :style="{ 'padding-left': (node.level - 1) * 16 + 'px' }">
+      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
         class="el-tree-node__expand-icon"
         @click.stop="handleExpandIconClick"

packages/tree/src/tree.vue

@@ -81,7 +81,11 @@
       currentNodeKey: [String, Number],
       load: Function,
       filterNodeMethod: Function,
-      accordion: Boolean
+      accordion: Boolean,
+      indent: {
+        type: Number,
+        default: 16
+      }
     },
 
     computed: {