1.0.0 • Published 4 years ago
mfy_test v1.0.0
安装
npm install tree-custom
使用 Tree
1 、简单渲染树结构页面
<Tree :treeData="treeData"/>
2、设置属性
treeData
:树结构数据,类型:Array, 默认:[] example:[ { id: '0', // nodeId label: '子级' + id, children: [ { id: '0_0', // nodeId label: '子级' + id, children: [] } ] } ]
showFoldIcon
:是否显示打开关闭箭头,类型:boolean, 默认:trueshowCheckBox
: 是否显示多选框,类型:boolean, 默认:truedefaultCheckedKeys
:默认选中的nodeId,类型:Array, 默认:[]defaultExpendKeys
:默认打开的nodeId,类型:Array, 默认:[]defaultDisabledKeys
:不可以选择的nodeId,类型:Array, 默认:[]
3、Example
<Tree
ref="tree"
:treeData="treeData"
:defaultCheckedKeys="['0']"
:defaultExpendKeys="['0']"
:defaultDisabledKeys="['1']"
:showCheckBox ="false"
:showFoldIcon ="false"/>
4、自定义树节点内容
- 方法一
<Tree :treeData="treeData">
<span class="custom-tree-node" slot-scope="{ node }">
<span class="tree-text">{{ node.label }}</span>
<span class="tree-node-btn">
<button @click="(event) => addNode(event, node)">
Add
</button>
<button @click="(event) => delNode(event, node)">
Del
</button>
</span>
</span>
</Tree>
- 方法二
<Tree :treeData="treeData"
:renderContent="renderContent"/>
renderContent(h, { node }) {
return (
<span class="custom-tree-node">
<span class="tree-text" >{node.label}</span>
<span class="tree-node-btn">
<button on-click={ (event) => this.addNode(event, node) }>Add</button>
<button on-click={ (event) => this.delNode(event, node) }>Del</button>
</span>
</span>);
}
1.0.0
4 years ago
0.3.0
4 years ago
0.2.9
4 years ago
0.2.8
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.5
4 years ago
0.2.3
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.2
4 years ago
0.1.3
4 years ago
0.1.1
4 years ago
0.1.0
5 years ago