From 8922f8357523dbed5d938e2e4753d8ddee8a1b66 Mon Sep 17 00:00:00 2001
From: liuarui <47778908+liuarui@users.noreply.github.com>
Date: Fri, 25 Jun 2021 16:53:01 +0800
Subject: [PATCH] docs(tree): fix bracket integrity (#2343)

* docs(tree): fix bracket integrity

* docs(tree): add jp omissions
---
 website/docs/es/tree.md    |   2 +-
 website/docs/fr-FR/tree.md |   2 +-
 website/docs/jp/tree.md    | 126 ++++++++++++++++++++++++++++++++++++-
 website/docs/zh-CN/tree.md |   2 +-
 4 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/website/docs/es/tree.md b/website/docs/es/tree.md
index 585ee4265e..fbd91d5340 100644
--- a/website/docs/es/tree.md
+++ b/website/docs/es/tree.md
@@ -789,7 +789,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
 | props                 | Opciones de configuración                | object                            | —                 | —           |
 | render-after-expand   | si se mostrarán los nodos hijo sólo después de que se desglose por primera vez un nodo padre | boolean                           | —                 | true        |
 | load                  | Método para cargar los datos de subárboles | function(node, resolve)           | —                 | —           |
-| render-content        | Función de renderizado para los nodos    | Function(h, { node, data, store } | —                 | —           |
+| render-content        | Función de renderizado para los nodos    | Function(h, { node, data, store }) | —                 | —           |
 | highlight-current     | Si el nodo actual está resaltado         | boolean                           | —                 | false       |
 | default-expand-all    | Expandir todos los nodos por defecto     | boolean                           | —                 | false       |
 | expand-on-click-node  | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | boolean | — | true |
diff --git a/website/docs/fr-FR/tree.md b/website/docs/fr-FR/tree.md
index 99c0bd5c2f..266fa859a1 100644
--- a/website/docs/fr-FR/tree.md
+++ b/website/docs/fr-FR/tree.md
@@ -793,7 +793,7 @@ Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggab
 | props                 | Options de configuration, voir table suivante. | object                      | —               | —       |
 | render-after-expand   | Si les noeuds enfants doivent être générés seulement après la première ouverture du parent. | boolean | — | true |
 | load                  | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`.  | function(node, resolve)     | —               | —       |
-| render-content        | Fonction de rendu pour les noeuds.            | Function(h, { node, data, store }        | —               | —       |
+| render-content        | Fonction de rendu pour les noeuds.            | Function(h, { node, data, store })        | —               | —       |
 | highlight-current     | Si le noeud courant est mis en valeur.      | boolean                     | —               | false   |
 | default-expand-all    | Si tous les noeuds sont ouverts par défaut.   | boolean                     | —               | false   |
 | expand-on-click-node  | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |
diff --git a/website/docs/jp/tree.md b/website/docs/jp/tree.md
index 44a69fde9c..e72354b9da 100644
--- a/website/docs/jp/tree.md
+++ b/website/docs/jp/tree.md
@@ -401,7 +401,131 @@
 
 :::demo ツリーノードのテンプレートをカスタマイズするには、`render-content` とスコープ付きスロットの2つの方法があります。ツリーノードの内容を返すレンダー関数を割り当てるには、`render-content` を使用します。レンダリング関数の詳細については、Vueのドキュメントを参照してください。スコープされたスロットを使用したい場合は、スコープ内の `node` と `data` にアクセスできます。JSX 構文をサポートしていないため、`render-content` デモは jsfiddle で実行できないことに注意してください。実際のプロジェクトでは、関連する依存関係が正しく設定されていれば `render-content` は動作します。
 ```html
+<div class="custom-tree-container">
+  <div class="block">
+    <p>Using render-content</p>
+    <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false"
+      :render-content="renderContent">
+    </el-tree>
+  </div>
+  <div class="block">
+    <p>Using scoped slot</p>
+    <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      :expand-on-click-node="false">
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span>
+            <a
+              @click="append(data)">
+              Append
+            </a>
+            <a
+              @click="remove(node, data)">
+              Delete
+            </a>
+          </span>
+        </span>
+      </template>
+    </el-tree>
+  </div>
+</div>
 
+<script>
+  let id = 1000;
+
+  export default {
+    data() {
+      const data = [{
+        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'
+        }]
+      }];
+      return {
+        data: JSON.parse(JSON.stringify(data)),
+      }
+    },
+
+    methods: {
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          data.children = []
+        }
+        data.children.push(newChild);
+        this.data = [...this.data]
+      },
+
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
+        this.data = [...this.data]
+      },
+
+      renderContent(h, { node, data, store }) {
+        return h("span", {
+          class: "custom-tree-node"
+        }, h("span", null, node.label), h("span", null, h("a", {
+          onClick: () => this.append(data)
+        }, "Append "), h("a", {
+          onClick: () => this.remove(node, data)
+        }, "Delete")));
+      }
+    }
+  };
+</script>
+
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
 ```
 :::
 
@@ -666,7 +790,7 @@
 | props                 | configuration options, see the following table | object                      | —               | —       |
 | render-after-expand   | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
 | load                  | method for loading subtree data, only works when `lazy` is true  | function(node, resolve)     | —               | —       |
-| render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
+| render-content        | render function for tree node            | Function(h, { node, data, store })        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
 | default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |
 | expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | boolean | — | true |
diff --git a/website/docs/zh-CN/tree.md b/website/docs/zh-CN/tree.md
index 52985a0846..e87db35589 100644
--- a/website/docs/zh-CN/tree.md
+++ b/website/docs/zh-CN/tree.md
@@ -799,7 +799,7 @@
 | props                 | 配置选项，具体看下表                               | object                      | —    | —     |
 | render-after-expand   | 是否在第一次展开某个树节点后才渲染其子节点         | boolean                      | —    | true |
 | load                  | 加载子树数据的方法，仅当 lazy 属性为true 时生效    | function(node, resolve)     | —    | —     |
-| render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store }        | —    | —     |
+| render-content        | 树节点的内容区的渲染 Function                      | Function(h, { node, data, store })        | —    | —     |
 | highlight-current     | 是否高亮当前选中节点，默认值是 false。             | boolean                     | —    | false |
 | default-expand-all    | 是否默认展开所有节点                               | boolean                     | —    | false |
 | expand-on-click-node  | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | boolean                     | —    | true  |