Skip to content

Commit

Permalink
Tree: support scoped slot (ElemeFE#9686)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leopoldthecoder
Leopoldthecoder authored Feb 6, 2018
1 parent 3bc67fa commit 248b1bf
Show file tree
Hide file tree
Showing 5 changed files with 454 additions and 182 deletions.
191 changes: 131 additions & 60 deletions examples/docs/en-US/tree.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,35 @@
.filter-tree {
margin-top: 20px;
}

.custom-tree-container {
display: flex;
margin: -24px;
}

.block {
flex: 1;
padding: 8px 24px 24px;

&:first-child {
border-right: solid 1px #eff2f6;
}

> p {
text-align: center;
margin: 0;
line-height: 4;
}
}

.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
}
</style>

Expand Down Expand Up @@ -218,11 +247,11 @@
this.$refs.tree.setCheckedNodes([
{
id: 5,
label: '二级 2-1'
label: 'Level two 2-1'
},
{
id: 9,
label: '三级 1-1-1'
label: 'Level three 1-1-1'
}
]);
},
Expand All @@ -249,13 +278,11 @@

renderContent(h, { node, data, store }) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
},
Expand All @@ -272,6 +299,7 @@
data2,
data3,
data4: JSON.parse(JSON.stringify(data2)),
data5: JSON.parse(JSON.stringify(data2)),
regions,
defaultProps,
props,
Expand Down Expand Up @@ -685,63 +713,92 @@ 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

:::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.
:::demo There are two ways to customize template for tree nodes: `render-content` and scoped slot. 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. If you prefer scoped slot, you'll have access to `node` and `data` in the scope, standing for the TreeNode object and node data of the current node respectively. Note that the `render-content` 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
:data="data4"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
<div class="custom-tree-container">
<div class="block">
<p>Using render-content</p>
<el-tree
:data="data4"
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="data5"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
Append
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
</div>
</div>

<script>
let id = 1000;
export default {
data() {
return {
data4: [{
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',
const data = [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 5,
label: 'Level two 2-1'
id: 9,
label: 'Level three 1-1-1'
}, {
id: 6,
label: 'Level two 2-2'
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
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'
}
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 {
data4: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data))
}
},
Expand All @@ -763,19 +820,28 @@ The content of tree nodes can be customized, so you can add icons or buttons as
renderContent(h, { node, data, store }) {
return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
<span>
<span>{node.label}</span>
</span>
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
}
};
</script>

<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
```
:::

Expand Down Expand Up @@ -986,3 +1052,8 @@ Only one node among the same level can be expanded at one time.
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |

### Scoped slot
| name | Description |
|------|--------|
| — | Custom content for tree nodes. The scope parameter is { node, data } |
Loading

0 comments on commit 248b1bf

Please sign in to comment.