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

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  |

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 @@
             </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) {
+      remove(store, node, data) {
-        store.remove(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>);
       }
@@ -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.

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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

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 @@
             </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) {
+      remove(store, node, data) {
-        store.remove(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>);
       }
@@ -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` 拥有如下方法，返回目前被选中的节点数组：