mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
docs(tree): fix bracket integrity (#2343)
* docs(tree): fix bracket integrity * docs(tree): add jp omissions
This commit is contained in:
liuarui
GitHub
parent
e93f6f6984
commit
8922f83575
@ -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 |
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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 |
|
||||
|
||||
@ -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 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user